Nebula.js: stardust

v4.8.0

Product and framework agnostic integration API for Qlik's Associative Engine

embed(app, instanceConfig?)

function

Initiates a new Embed instance using the specified enigma app.

Parameters

app
EngineAPI.IApp

No description

instanceConfig

No description

Returns

No description

import { embed } from '@nebula.js/stardust'
const n = embed(app);
n.render({ id: 'abc' });

embedcreateConfiguration(configuration)

function

Creates a new embed scope bound to the specified configuration.

The configuration is merged with all previous scopes.

Parameters

configuration

The configuration object

Returns

No description

import { embed } from '@nebula.js/stardust';
// create a 'master' config which registers all types
const m = embed.createConfiguration({
  types: [{
    name: 'mekko',
    version: '1.0.0',
    load: () => Promise.resolve(mekko)
  }],
});

// create an alternate config with dark theme
// and inherit the config from the previous
const d = m.createConfiguration({
 context: {
   theme: 'dark'
 }
});

m(app).render({ type: 'mekko' }); // will render the object with default theme
d(app).render({ type: 'mekko' }); // will render the object with 'dark' theme
embed(app).render({ type: 'mekko' }); // will throw error since 'mekko' is not a register type on the default instance

useState(initialState)

function

Creates a stateful value.

Parameters

initialState
S | function

The initial state.

Returns

Array<S, SetStateFn>

The value and a function to update it.

import { useState } from '@nebula.js/stardust';
// ...
// initiate with simple primitive value
const [zoomed, setZoomed] = useState(false);

// update
setZoomed(true);

// lazy initiation
const [value, setValue] = useState(() => heavy());

useEffect(effect, deps?)

function

Triggers a callback function when a dependent value changes.

Parameters

effect

The callback.

deps
Array<any>

The dependencies that should trigger the callback.

import { useEffect } from '@nebula.js/stardust';
// ...
useEffect(() => {
  console.log('mounted');
  return () => {
    console.log('unmounted');
  };
}, []);

useMemo(factory, deps)

function

Creates a stateful value when a dependent changes.

Parameters

factory
function

The factory function.

deps
Array<any>

The dependencies.

Returns

T

The value returned from the factory function.

import { useMemo } from '@nebula.js/stardust';
// ...
const v = useMemo(() => {
  return doSomeHeavyCalculation();
}), []);

usePromise(factory, deps?)

function

Runs a callback function when a dependent changes.

Parameters

factory
function

The factory function that calls the promise.

deps
Array<any>

The dependencies.

Returns

Array<P, Error>

The resolved value.

import { usePromise } from '@nebula.js/stardust';
import { useModel } from '@nebula.js/stardust';
// ...
const model = useModel();
const [resolved, rejected] = usePromise(() => model.getLayout(), []);

useElement()

function

Gets the HTMLElement this visualization is rendered into.

Returns

HTMLElement

No description

import { useElement } from '@nebula.js/stardust';
// ...
const el = useElement();
el.innerHTML = 'Hello!';

useRect()

function

Gets the size of the HTMLElement the visualization is rendered into.

Returns

The size of the element.

import { useRect } from '@nebula.js/stardust';
// ...
const rect = useRect();
useEffect(() => {
  console.log('resize');
}, [rect.width, rect.height])

useLayout()

function

Gets the layout of the generic object associated with this visualization.

Returns

EngineAPI.IGenericObjectLayout

No description

import { useLayout } from '@nebula.js/stardust';
// ...
const layout = useLayout();
console.log(layout);

useStaleLayout()

function

Gets the layout of the generic object associated with this visualization.

Unlike the regular layout, a stale layout is not changed when a generic object enters the modal state. This is mostly notable in that qSelectionInfo.qInSelections in the layout is always false. The returned value from useStaleLayout() and useLayout() are identical when the object is not in a modal state.

Returns

EngineAPI.IGenericObjectLayout

No description

import { useStaleLayout } from '@nebula.js/stardust';
// ...
const staleLayout = useStaleLayout();
console.log(staleLayout);

useAppLayout()

function

Gets the layout of the app associated with this visualization.

Returns

EngineAPI.INxAppLayout

The app layout

import { useAppLayout } from '@nebula.js/stardust';
// ...
const appLayout = useAppLayout();
console.log(appLayout.qLocaleInfo);

useModel()

function

Gets the generic object API of the generic object connected to this visualization.

Returns

EngineAPI.IGenericObject | undefined

No description

import { useModel } from '@nebula.js/stardust';
// ...
const model = useModel();
useEffect(() => {
  model.getInfo().then(info => {
    console.log(info);
  })
}, []);

useApp()

function

Gets the doc API.

Returns

EngineAPI.IApp | undefined

The doc API.

import { useApp } from '@nebula.js/stardust';
// ...
const app = useApp();
useEffect(() => {
  app.getAllInfos().then(infos => {
    console.log(infos);
  })
}, []);

useGlobal()

function

Gets the global API.

Returns

EngineAPI.IGlobal | undefined

The global API.

import { useGlobal } from '@nebula.js/stardust';

// ...
const g = useGlobal();
useEffect(() => {
  g.engineVersion().then(version => {
    console.log(version);
  })
}, []);

useSelections()

function

Gets the object selections.

Returns

The object selections.

import { useSelections } from '@nebula.js/stardust';
import { useElement } from '@nebula.js/stardust';
import { useEffect } from '@nebula.js/stardust';
// ...
const selections = useSelections();
const element = useElement();
useEffect(() => {
  const onClick = () => {
    selections.begin('/qHyperCubeDef');
  };
  element.addEventListener('click', onClick);
  return () => {
    element.removeEventListener('click', onClick);
  };
}, []);

useTheme()

function

Gets the theme.

Returns

The theme.

import { useTheme } from '@nebula.js/stardust';

const theme = useTheme();
console.log(theme.getContrastinColorTo('#ff0000'));

useEmbed()

function
experimental

Gets the embed instance used.

Returns

The embed instance used.

import { useEmbed } from '@nebula.js/stardust';

const embed = useEmbed();
embed.render(...)

useTranslator()

function

Gets the translator.

Returns

The translator.

import { useTranslator } from '@nebula.js/stardust';
// ...
const translator = useTranslator();
console.log(translator.get('SomeString'));

useDeviceType()

function

Gets the device type. ('touch' or 'desktop')

Returns

string

device type.

import { useDeviceType } from '@nebula.js/stardust';
// ...
const deviceType = useDeviceType();
if (deviceType === 'touch') { ... };

usePlugins()

function

Gets the array of plugins provided when rendering the visualization.

Returns

array of plugins.

// provide plugins that can be used when rendering
embed(app).render({
  element,
  type: 'my-chart',
  plugins: [plugin]
});
// It's up to the chart implementation to make use of plugins in any way
import { usePlugins } from '@nebula.js/stardust';
// ...
const plugins = usePlugins();
plugins.forEach((plugin) => {
  // Invoke plugin
  plugin.fn();
});

useAction(factory, deps?)

function

Registers a custom action.

Parameters

factory
function

No description

deps
Array<any>

No description

Returns

A

No description

import { useAction } from '@nebula.js/stardust';
// ...
const [zoomed, setZoomed] = useState(false);
const act = useAction(() => ({
  hidden: false,
  disabled: zoomed,
  action() {
    setZoomed(prev => !prev);
  },
  icon: {}
}), [zoomed]);

useConstraints()

function
deprecated

Gets the desired constraints that should be applied when rendering the visualization.

The constraints are set on the embed configuration before the visualization is rendered and should be respected when implementing the visualization.

Returns

deprecated

No description

// configure embed to disallow active interactions when rendering
embed(app, {
 context: {
   constraints: {
     active: true, // do not allow interactions
   }
 }
}).render({ element, id: 'sdfsdf' });
import { useConstraints } from '@nebula.js/stardust';
// ...
const constraints = useConstraints();
useEffect(() => {
  if (constraints.active) {
    // do not add any event listener if active constraint is set
    return undefined;
  }
  const listener = () => {};
  element.addEventListener('click', listener);
  return () => {
    element.removeEventListener('click', listener);
  };
}, [constraints])

useInteractionState()

function

Gets the desired interaction states that should be applied when rendering the visualization.

The interactions are set on the embed configuration before the visualization is rendered and should be respected when implementing the visualization.

Returns

No description

// configure embed to disallow active interactions when rendering
embed(app, {
 context: {
   interactions: {
     active: false, // do not allow interactions
   }
 }
}).render({ element, id: 'sdfsdf' });
import { useInteractionState } from '@nebula.js/stardust';
// ...
const interactions = useInteractionState();
useEffect(() => {
  if (!interactions.active) {
    // do not add any event listener if active constraint is set
    return undefined;
  }
  const listener = () => {};
  element.addEventListener('click', listener);
  return () => {
    element.removeEventListener('click', listener);
  };
}, [interactions])

useOptions()

function

Gets the options object provided when rendering the visualization.

This is an empty object by default but enables customization of the visualization through this object. Options are different from setting properties on the generic object in that options are only temporary settings applied to the visualization when rendered.

You have the responsibility to provide documentation of the options you support, if any.

Returns

object

No description

// when embedding the visualization, anything can be set in options
embed(app).render({
  element,
  type: 'my-chart',
  options: {
    showNavigation: true,
  }
});
// it is up to you use and implement the provided options
import { useOptions } from '@nebula.js/stardust';
import { useEffect } from '@nebula.js/stardust';
// ...
const options = useOptions();
useEffect(() => {
  if (!options.showNavigation) {
    // hide navigation
  } else {
    // show navigation
  }
}, [options.showNavigation]);

useImperativeHandle(factory, deps?)

function

This is an empty object by default, but enables you to provide a custom API of your visualization to make it possible to control after it has been rendered.

You can only use this hook once, calling it more than once is considered an error.

Parameters

factory
function

No description

deps
Array<any>

No description

import { useImperativeHandle } form '@nebula.js/stardust';
// ...
useImperativeHandle(() => ({
  resetZoom() {
    setZoomed(false);
  }
}));
// when embedding the visualization, you can get a handle to this API
// and use it to control the visualization
const ctl = await embed(app).render({
  element,
  type: 'my-chart',
});
ctl.getImperativeHandle().resetZoom();

onTakeSnapshot(snapshotCallback)

function

Registers a callback that is called when a snapshot is taken.

Parameters

snapshotCallback

No description

import { onTakeSnapshot } from '@nebula.js/stardust';
import { useState } from '@nebula.js/stardust';
import { useLayout } from '@nebula.js/stardust';

const layout = useLayout();
const [zoomed] = useState(layout.isZoomed || false);

onTakeSnapshot((copyOfLayout) => {
  copyOfLayout.isZoomed = zoomed;
  return Promise.resolve(copyOfLayout);
});

useRenderState()

function
experimental

Gets render state instance.

Used to update properties and get a new layout without triggering onInitialRender.

Returns

The render state.

import { useRenderState } from '@nebula.js/stardust';

const renderState = useRenderState();
useState(() => {
  if(needProperteisUpdate(...)) {
     useRenderState.pending();
     updateProperties(...);
  } else {
     useRenderState.restore();
     ...
  }
}, [...]);

useEmitter()

function
experimental

Gets an event emitter instance for the visualization.

Returns

No description

// In a Nebula visualization
import { useEmitter } from '@nebula.js/stardust';
useEffect(()=> {
  // on some trigger
  emitter.emit("trigger", params)
}, [...])

// In a mashup
const viz = await n.render({
  element: el,
  id: 'abcdef'
});
viz.addListener("trigger", ()=> {
  // do something
})

useKeyboard()

function

Gets the desired keyboard settings and status to applied when rendering the visualization. A visualization should in general only have tab stops if either keyboard.enabled is false or if active is true. This means that either Nebula isn't configured to handle keyboard input or the chart is currently focused. Enabling or disabling keyboardNavigation are set on the embed configuration and should be respected by the visualization.

Returns

experimental

No description

// configure nebula to enable navigation between charts
embed(app, {
  context: {
    keyboardNavigation: true, // tell Nebula to handle navigation
  }
}).render({ element, id: 'sdfsdf' });
import { useKeyboard } from '@nebula.js/stardust';
// ...
const keyboard = useKeyboard();
useEffect(() => {
 // Set a tab stop on our button if in focus or if Nebulas navigation is disabled
 button.setAttribute('tabIndex', keyboard.active || !keyboard.enabled ? 0 : -1);
 // If navigation is enabled and focus has shifted, lets focus the button
 keyboard.enabled && keyboard.active && button.focus();
}, [keyboard])

Conversion

namespace

Provides conversion functionality to extensions.

import { conversion } from '@nebula.js/stardust';

export default function() {
  return {
    qae: {
      ...
      importProperties: ( exportFormat, initialProperties ) =>  conversion.hyperCube.importProperties(exportFormat, initialProperties),
      exportProperties: ( fullPropertyTree ) => conversion.hyperCube.exportProperties(fullPropertyTree)
    },
    ...
  };
}

Conversionhypercube

hyperCubeConversion
implementsConversionType

Provides conversion functionality to extensions with hyperCubes.

EnigmaMocker

namespace

Mocks Engima app functionality for demo and testing purposes.

EnigmaMockerfromGenericObjects(genericObjects, options?)

function
experimental

Mocks Engima app functionality. It accepts one / many generic objects as input argument and returns the mocked Enigma app. Each generic object represents one visulization and specifies how it behaves. For example, what layout to use the data to present.

The generic object is represented with 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!).

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.

Parameters

genericObjects
Array<object>

Generic objects controling behaviour of visualizations.

options

Options for Enigma Mocker

Returns

Promise<EngineAPI.IApp>

No description

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

Component

interface

Properties

key
string

The key of the component. Currently supporting components "theme" and "selections".

const n = embed(app);
const inst = await n.field('field_name');
inst.mount(document.querySelector('.listbox'), {
  components: [{
   key: 'theme',
   header: {
     fontColor: { color: '#f00' },
     fontSize: 23,
   },
   content: {
     fontSize: 16,
     useContrastColor: false,
   }
  },{
   key: 'selections',
   colors: {
     selected: { color: '#0f0' },
     alternative: { color: '#ededed' },
     excluded: { color: '#ccc' },
     selectedExcluded: { color: '#bbb' },
     possible: { color: '#fefefe' },
     possible: { color: '#fefefe' },
   }
 }]
});

Configuration

interface

Properties

types

Visualization types to register

themes

Themes to register

anything
object

No description

import { embed } from '@nebula.js/stardust'
n = embed(app, {
  context: {
    keyboardNavigation: true,
    theme: 'purple',
  },
  load: ({ name, version }) => {
    if (name === 'linechart') {
      return Promise.resolve(line);
    }
  },
  types: [
    {
      name: 'bar',
      load: () => Promise.resolve(bar),
    },
  ],
  themes: [
    {
      id: 'purple',
      load: () => Promise.resolve(purpleThemeJson),
    },
  ],
});

Configurationload(type)

LoadType

Fallback load function for missing types

Parameters

type

No description

Returns

No description

Configurationcontext

Context

Settings for the rendering instance

Properties

theme
default='light'
string

No description

language
default='en-US'
string

No description

deviceType
default='auto'
string

No description

keyboardNavigation
default=false
boolean

No description

disableCellPadding
default=false
boolean

No description

contextconstraints

Constraints
deprecated

Properties

passive
default=false
boolean

Whether or not passive constraints are on. Should block any passive interaction by users, ie: tooltips

active
default=false
boolean

Whether or not active constraints are on. Should block any active interaction by users, ie: scroll, click

select
default=false
boolean

Whether or not select constraints are on. Should block any selection action. Implied when active is true.

edit
default=true
boolean

Whether or not edit actions are available. Should block any edit action.

contextinteractions

Interactions

Properties

passive
default=true
boolean

Whether or not passive interactions are on. Allows passive interaction by users, ie: tooltips

active
default=true
boolean

Whether or not active interactions are on. Allows active interaction by users, ie: scroll, click

select
default=true
boolean

Whether or not select interactions are on. Alows selection actions. Implied when active is false.

edit
default=false
boolean

Whether or not edit actions are on. Allows edit actions.

Context

interface

Properties

theme
default='light'
string

No description

language
default='en-US'
string

No description

deviceType
default='auto'
string

No description

keyboardNavigation
default=false
boolean

No description

disableCellPadding
default=false
boolean

No description

Contextconstraints

Constraints
deprecated

Properties

passive
default=false
boolean

Whether or not passive constraints are on. Should block any passive interaction by users, ie: tooltips

active
default=false
boolean

Whether or not active constraints are on. Should block any active interaction by users, ie: scroll, click

select
default=false
boolean

Whether or not select constraints are on. Should block any selection action. Implied when active is true.

edit
default=true
boolean

Whether or not edit actions are available. Should block any edit action.

Contextinteractions

Interactions

Properties

passive
default=true
boolean

Whether or not passive interactions are on. Allows passive interaction by users, ie: tooltips

active
default=true
boolean

Whether or not active interactions are on. Allows active interaction by users, ie: scroll, click

select
default=true
boolean

Whether or not select interactions are on. Alows selection actions. Implied when active is false.

edit
default=false
boolean

Whether or not edit actions are on. Allows edit actions.

Galaxy

interface

Properties

translator

No description

deviceType
string

No description

anything
object

No description

Galaxyflags

Flags

flagsisEnabled(flag)

function

Checks whether the specified flag is enabled.

Parameters

flag
string

The value flag to check.

Returns

boolean

True if the specified flag is enabled, false otherwise.

new Embed()

class

Embedrender(cfg)

function

Renders a visualization or sheet into an HTMLElement. Visualizations can either be existing objects or created on the fly. Support for sense sheets is experimental.

Parameters

cfg

Configuration for rendering a visualisation, either creating or fetching an existing object.

Returns

Promise<Viz | Sheet>

A controller to the rendered visualization or sheet.

// render from existing object
n.render({
  element: el,
  id: 'abcdef'
});
// render on the fly
n.render({
  element: el,
  type: 'barchart',
  fields: ['Product', { qLibraryId: 'u378hn', type: 'measure' }]
});

Embedcreate(cfg)

function
experimental

Creates a visualization model

Parameters

cfg

Rendering configuration for creating and rendering a new object

Returns

Promise<EngineAPI.IGenericObject>

An engima model

// create a barchart in the app and return the model
const model = await n.create({
    type: 'barchart',
    fields: ['Product', { qLibraryId: 'u378hn', type: 'measure' }],
    properties: { showTitle: true }
  }
);

EmbedgenerateProperties(cfg)

function
experimental

Generates properties for a visualization object

Parameters

cfg

Rendering configuration for creating and rendering a new object

Returns

Promise<object>

The objects properties

// generate properties for a barchart
const properties = await n.generateProperties({
    type: 'barchart',
    fields: ['Product', { qLibraryId: 'u378hn', type: 'measure' }],
    properties: { showTitle: true }
  },
);

Embedcontext(ctx)

function

Updates the current context of this embed instance. Use this when you want to change some part of the current context, like theme.

Parameters

ctx

The context to update.

Returns

Promise<undefined>

No description

// change theme
n.context({ theme: 'dark'});
// change interactions
n.context({ interactions: { select: false } });

Embedselections()

function

Gets the app selections of this instance.

Returns

No description

const selections = await n.selections();
selections.mount(element);

Embedfield(fieldIdentifier)

function

Gets the listbox instance of the specified field

Parameters

fieldIdentifier
string | LibraryField | QInfo

Fieldname as a string, a Library dimension or an object id

Returns

No description

const fieldInstance = await n.field("MyField");
fieldInstance.mount(element, { title: "Hello Field"});

EmbedgetRegisteredTypes()

function

Gets a list of registered visualization types and versions

Returns

Array<Object>

types

const types = n.getRegisteredTypes();
// Contains
//[
// {
//   name: "barchart"
//   versions:[undefined, "1.2.0"]
// }
//]

type Direction

'ltr' | 'rtl'

type ListLayout

'vertical' | 'horizontal'

type FrequencyMode

'none' | 'value' | 'percent' | 'relative'

type SearchMode

boolean | 'toggle'

type FieldEventTypes

'selectionActivated' | 'selectionDeactivated'

new FieldInstance()

class

FieldInstanceon(eventType, callback)

function

Event listener function on instance

Parameters

eventType

event type that function needs to listen

callback
function

a callback function to run when event emits

const handleSomeEvent () => {...};
fieldInstance.on('someEvent', handleSomeEvent);
...
fieldInstance.removeListener('someEvent', handleSomeEvent);

FieldInstanceremoveListener(eventType, callback)

function

Remove listener on instance

Parameters

eventType

event type

callback
function

handler

FieldInstancemount(element, options?)

function

Mounts the field as a listbox into the provided HTMLElement.

Parameters

element
HTMLElement

No description

options

Settings for the embedded listbox

Returns

Promise<void>

A promise that resolves when the data is fetched.

fieldInstance.mount(element);

FieldInstanceunmount()

function

Unmounts the field listbox from the DOM.

listbox.unmount();

type ThemeJSON

any

ThemeInfo

interface

Properties

id
string

Theme identifier

ThemeInfoload()

function

A function that should return a Promise that resolves to a raw JSON theme.

Returns

Promise<ThemeJSON>

No description

QInfo

interface

Properties

qId
string

Generic object id

new Sheet()

class
experimental

A controller to further modify a visualization after it has been rendered.

Properties

id
experimental
string

The id of this sheets's generic object.

model
experimental
string

This sheets Enigma model, a representation of the generic object.

const sheet = await embed(app).render({
  element,
  id: "jD5Gd"
});
sheet.destroy();

Sheetdestroy()

function
experimental

Destroys the sheet and removes it from the the DOM.

const sheet = await embed(app).render({
  element,
  id: "jD5Gd"
});
sheet.destroy();

new Viz()

class

A controller to further modify a visualization after it has been rendered.

Properties

id
string

The id of this visualization's generic object.

model
EngineAPI.IGenericObject

This visualizations Enigma model, a representation of the generic object.

const viz = await embed(app).render({
  element,
  type: 'barchart'
});
viz.destroy();

Vizdestroy()

function

Destroys the visualization and removes it from the the DOM.

const viz = await embed(app).render({
  element,
  id: 'abc'
});
viz.destroy();

VizconvertTo(newType, forceUpdate?, forcePatch?)

function

Converts the visualization to a different registered type.

Will update properties if permissions allow, else will patch (can be forced with forcePatch parameter)

Not all chart types are compatible, similar structures are required.

Parameters

newType
string

Which registered type to convert to.

forceUpdate
boolean

Whether to apply the change or not, else simply returns the resulting properties, defaults to true.

forcePatch
boolean

Whether to always patch the change instead of making a permanent change

Returns

Promise<object>

Promise object that resolves to the full property tree of the converted visualization.

const viz = await embed(app).render({
  element,
  id: 'abc'
});
await viz.convertTo('barChart');
// Change the barchart to a linechart, only in the current session
const newProperties = await viz.convertTo('lineChart', false, true);
// Remove the conversion by clearing the patches
await viz.model.clearSoftPatches();

VizaddListener(eventName, listener)

function
experimental

Listens to custom events from inside the visualization. See useEmitter

Parameters

eventName
string

Event name to listen to

listener
function

Callback function to invoke

VizremoveListener(eventName, listener)

function
experimental

Removes a listener

Parameters

eventName
string

Event name to remove from

listener
function

Callback function to remove

VizgetImperativeHandle()

function

Gets the specific api that a Viz exposes.

Returns

Promise<object>

object that contains the internal Viz api.

Flags

interface

FlagsisEnabled(flag)

function

Checks whether the specified flag is enabled.

Parameters

flag
string

The value flag to check.

Returns

boolean

True if the specified flag is enabled, false otherwise.

new AppSelections()

class

AppSelectionsmount(element)

function

Mounts the app selection UI into the provided HTMLElement.

Parameters

element
HTMLElement

No description

selections.mount(element);

AppSelectionsunmount()

function

Unmounts the app selection UI from the DOM.

selections.unmount();

new ObjectSelections()

class

ObjectSelectionsaddListener(eventType, callback)

function

Event listener function on instance

Parameters

eventType
string

event type that function needs to listen

callback
function

a callback function to run when event emits

api.addListener('someEvent', () => {...});

ObjectSelectionsremoveListener(eventType, callback)

function

Remove listener function on instance

Parameters

eventType
string

event type that function needs to listen

callback
function

a callback function to run when event emits

api.removeListener('someEvent', () => {...});

ObjectSelectionsbegin(paths)

function

Parameters

paths
Array<string>

No description

Returns

Promise<undefined>

No description

ObjectSelectionsclear()

function

Returns

Promise<undefined>

No description

ObjectSelectionsconfirm()

function

Returns

Promise<undefined>

No description

ObjectSelectionscancel()

function

Returns

Promise<undefined>

No description

ObjectSelectionsselect(s)

function

Parameters

s

No description

Returns

No description

ObjectSelectionscanClear()

function

Returns

boolean

No description

ObjectSelectionscanConfirm()

function

Returns

boolean

No description

ObjectSelectionscanCancel()

function

Returns

boolean

No description

ObjectSelectionsisActive()

function

Returns

boolean

No description

ObjectSelectionsisModal()

function

Returns

boolean

No description

ObjectSelectionsgoModal(paths)

function

Parameters

paths
Array<string>

No description

Returns

Promise<undefined>

No description

ObjectSelectionsnoModal(accept?)

function

Parameters

accept
default=false
boolean

No description

Returns

Promise<undefined>

No description

type Field

string | EngineAPI.INxDimension | EngineAPI.INxMeasure | LibraryField

CreateConfig

interface

Rendering configuration for creating and rendering a new object

Properties

type
string

No description

version
string

No description

fields
Array<Field>

No description

properties
EngineAPI.IGenericObjectProperties

No description

RenderConfig

interface

Configuration for rendering a visualisation, either creating or fetching an existing object.

Properties

element
HTMLElement

Target html element to render in to

options
object

Options passed into the visualisation

plugins

plugins passed into the visualisation

id
string

For existing objects: Engine identifier of object to render

type
string

For creating objects: Type of visualisation to render

version
string

For creating objects: Version of visualization to render

fields
Array<Field>

For creating objects: Data fields to use

extendProperties
default=false
boolean

For creating objects: Whether to deeply extend properties or not. If false then subtrees will be overwritten.

properties
EngineAPI.IGenericObjectProperties

For creating objects: Explicit properties to set

// A config for Creating objects:
const createConfig = {
  type: 'bar',
  element: document.querySelector('.bar'),
  extendProperties: true,
  fields: ['[Country names]', '=Sum(Sales)'],
  properties: {
    legend: {
      show: false,
    },
  }
};
nebbie.render(createConfig);
// A config for rendering an existing object:
const createConfig = {
  id: 'jG5LP',
  element: document.querySelector('.line'),
};
nebbie.render(createConfig);

LibraryField

interface

Properties

qLibraryId
string

No description

type
'dimension' | 'measure'

No description

Plugin

interface
experimental

An object literal containing meta information about the plugin and a function containing the plugin implementation.

Properties

info
experimental

Object that can hold various meta info about the plugin

const plugin = {
  info: {
    name: "example-plugin",
    type: "meta-type",
  },
  fn: () => {
    // Plugin implementation goes here
  }
};

Pluginfn

function
experimental

The implementation of the plugin. Input and return value is up to the plugin implementation to decide based on its purpose.

LoadType(type)

interface

Parameters

type

No description

Returns

No description

TypeInfo

interface

Properties

name
string

No description

version
string

No description

meta
object

No description

TypeInfoload(type)

LoadType

Parameters

type

No description

Returns

No description

ActionToolbarElement

interface
extendsHTMLElement

Properties

className
'njs-action-toolbar-popover'

No description

ActionElement

interface
extendsHTMLElement

Properties

className
'njs-cell-action'

No description

CellElement

interface
extendsHTMLElement

Properties

className
'njs-cell'

No description

CellFooter

interface
extendsHTMLElement

Properties

className
'njs-cell-footer'

No description

CellTitle

interface
extendsHTMLElement

Properties

className
'njs-cell-title'

No description

CellSubTitle

interface
extendsHTMLElement

Properties

className
'njs-cell-sub-title'

No description

SheetElement

interface
extendsHTMLElement
experimental

Properties

className
experimental
'njs-sheet'

No description

VizElementAttributes

interface
extendsNamedNodeMap

Properties

data-render-count
string

No description

VizElement

interface
extendsHTMLElement

Properties

className
'njs-viz'

No description

VizElementattributes

VizElementAttributes
extendsNamedNodeMap

Properties

data-render-count
string

No description

Visualization(galaxy)

interface

The entry point for defining a visualization.

Parameters

galaxy

No description

Returns

No description

import { useElement, useLayout } from '@nebula.js/stardust';

export default function() {
  return {
    qae: {
      properties: {
        dude: 'Heisenberg',
      }
    },
    component() {
      const el = useElement();
      const layout = useLayout();
      el.innerHTML = `What's my name? ${layout.dude}!!!`;
    }
  };
}

VisualizationDefinition

interface

VisualizationDefinitionqae

QAEDefinition

Properties

properties
EngineAPI.IGenericObjectProperties

No description

data

No description

qaeimportProperties(args)

importProperties

Imports properties for a chart with a hypercube.

Parameters

args

No description

Returns

Object

A properties tree

qaeexportProperties(args)

exportProperties

Exports properties for a chart with a hypercube.

Parameters

args

No description

Returns

Used for exporting and importing properties between backend models. An object that exports to ExportFormat should put dimensions and measures inside one data group. If an object has two hypercubes, each of the cubes should export dimensions and measures in two separate data groups. An object that imports from this structure is responsible for putting the existing properties where they should be in the new model.

VisualizationDefinitioncomponent()

function

Returns

void

No description

SetStateFn(newState)

interface

Parameters

newState
S | function

The new state

type EffectCallback

function

Returns

void | function

No description

Rect

interface

Properties

top
number

No description

left
number

No description

width
number

No description

height
number

No description

ActionDefinition

interface

Properties

action
A

No description

hidden
boolean

No description

disabled
boolean

No description

icon

No description

Constraints

interface
deprecated

Properties

passive
default=false
boolean

Whether or not passive constraints are on. Should block any passive interaction by users, ie: tooltips

active
default=false
boolean

Whether or not active constraints are on. Should block any active interaction by users, ie: scroll, click

select
default=false
boolean

Whether or not select constraints are on. Should block any selection action. Implied when active is true.

edit
default=true
boolean

Whether or not edit actions are available. Should block any edit action.

Interactions

interface

Properties

passive
default=true
boolean

Whether or not passive interactions are on. Allows passive interaction by users, ie: tooltips

active
default=true
boolean

Whether or not active interactions are on. Allows active interaction by users, ie: scroll, click

select
default=true
boolean

Whether or not select interactions are on. Alows selection actions. Implied when active is false.

edit
default=false
boolean

Whether or not edit actions are on. Allows edit actions.

RenderState

interface

Properties

pending
any

No description

restore
any

No description

new Emitter()

class

Keyboard

interface
experimental

Properties

enabled
experimental
boolean

Whether or not Nebula handles keyboard navigation or not.

active
experimental
boolean

Set to true when the chart is activated, ie a user tabs to the chart and presses Enter or Space.

Keyboardblur(Type boolean)

function
experimental

Function used by the visualization to tell Nebula it wants to relinquish focus

Parameters

boolean

No description

Keyboardfocus()

function
experimental

Function used by the visualization to tell Nebula it wants to focus

KeyboardfocusSelection(Type boolean)

function
experimental

Function used by the visualization to tell Nebula that focus the selection toolbar

Parameters

boolean

No description

importProperties(args)

function

Imports properties for a chart with a hypercube.

Parameters

args

No description

Returns

Object

A properties tree

exportProperties(args)

function

Exports properties for a chart with a hypercube.

Parameters

args

No description

Returns

Used for exporting and importing properties between backend models. An object that exports to ExportFormat should put dimensions and measures inside one data group. If an object has two hypercubes, each of the cubes should export dimensions and measures in two separate data groups. An object that imports from this structure is responsible for putting the existing properties where they should be in the new model.

QAEDefinition

interface

Properties

properties
EngineAPI.IGenericObjectProperties

No description

data

No description

QAEDefinitionimportProperties(args)

importProperties

Imports properties for a chart with a hypercube.

Parameters

args

No description

Returns

Object

A properties tree

QAEDefinitionexportProperties(args)

exportProperties

Exports properties for a chart with a hypercube.

Parameters

args

No description

Returns

Used for exporting and importing properties between backend models. An object that exports to ExportFormat should put dimensions and measures inside one data group. If an object has two hypercubes, each of the cubes should export dimensions and measures in two separate data groups. An object that imports from this structure is responsible for putting the existing properties where they should be in the new model.

DataTarget

interface

Properties

path
string

No description

DataTargetdimensions

FieldTarget

Properties

min
function | number

Number or function that returns the minimum number of fields

max
function | number

Number or function that returns the maximum number of fields

dimensionsadded(field, properties)

fieldTargetAddedCallback

Parameters

field
T

No description

properties
EngineAPI.IGenericObjectProperties

No description

dimensionsremoved(field, properties, index)

fieldTargetRemovedCallback

Parameters

field
T

No description

properties
EngineAPI.IGenericObjectProperties

No description

index
number

No description

DataTargetmeasures

FieldTarget

Properties

min
function | number

Number or function that returns the minimum number of fields

max
function | number

Number or function that returns the maximum number of fields

measuresadded(field, properties)

fieldTargetAddedCallback

Parameters

field
T

No description

properties
EngineAPI.IGenericObjectProperties

No description

measuresremoved(field, properties, index)

fieldTargetRemovedCallback

Parameters

field
T

No description

properties
EngineAPI.IGenericObjectProperties

No description

index
number

No description

fieldTargetAddedCallback(field, properties)

function

Parameters

field
T

No description

properties
EngineAPI.IGenericObjectProperties

No description

fieldTargetRemovedCallback(field, properties, index)

function

Parameters

field
T

No description

properties
EngineAPI.IGenericObjectProperties

No description

index
number

No description

FieldTarget

interface

Properties

min
function | number

Number or function that returns the minimum number of fields

max
function | number

Number or function that returns the maximum number of fields

FieldTargetadded(field, properties)

fieldTargetAddedCallback

Parameters

field
T

No description

properties
EngineAPI.IGenericObjectProperties

No description

FieldTargetremoved(field, properties, index)

fieldTargetRemovedCallback

Parameters

field
T

No description

properties
EngineAPI.IGenericObjectProperties

No description

index
number

No description

new Translator()

class

Translatorlanguage(lang?)

function

Returns current locale.

Parameters

lang
string

language Locale to updated the currentLocale value

Returns

string

current locale.

Translatoradd(item)

function

Registers a string in multiple locales

Parameters

item

No description

translator.add({
  id: 'company.hello_user',
  locale: {
    'en-US': 'Hello {0}',
    'sv-SE': 'Hej {0}'
  }
});
translator.get('company.hello_user', ['John']); // Hello John

Translatorget(str, args?)

function

Translates a string for current locale.

Parameters

str
string

ID of the registered string.

args
Array<string>

Values passed down for string interpolation.

Returns

string

The translated string.

new Theme()

class

Themename()

function

Returns theme name

Returns

string

Current theme.

theme.name();

ThemegetDataColorScales()

function

Returns

No description

ThemegetDataColorPalettes()

function

Returns

No description

ThemegetDataColorPickerPalettes()

function

Returns

No description

ThemegetDataColorSpecials()

function

Returns

No description

ThemegetColorPickerColor(c, supportNone?)

function

Resolve a color object using the color picker palette from the provided JSON theme.

Parameters

c

No description

supportNone
boolean

Shifts the palette index by one to account for the "none" color

Returns

string

The resolved color.

theme.getColorPickerColor({ index: 1 });
theme.getColorPickerColor({ index: 1 }, true);
theme.getColorPickerColor({ color: 'red' });

ThemegetContrastingColorTo(color)

function

Get the best contrasting color against the specified color. This is typically used to find a suitable text color for a label placed on an arbitrarily colored background.

The returned colors are derived from the theme.

Parameters

color
string

A color to measure the contrast against

Returns

string
  • The color that has the best contrast against the specified color.
theme.getContrastingColorTo('#400');

ThemegetStyle(basePath, path, attribute)

function

Get the value of a style attribute in the theme by searching in the theme's JSON structure. The search starts at the specified base path and continues upwards until the value is found. If possible it will get the attribute's value using the given path. When attributes separated by dots are provided, such as 'hover.color', they are required in the theme JSON file

Parameters

basePath
string

Base path in the theme's JSON structure to start the search in (specified as a name path separated by dots).

path
string

Expected path for the attribute (specified as a name path separated by dots).

attribute
string

Name of the style attribute. (specified as a name attribute separated by dots).

Returns

string | undefined

The style value or undefined if not found

theme.getStyle('object', 'title.main', 'fontSize');
theme.getStyle('object', 'title', 'main.fontSize');
theme.getStyle('object', '', 'title.main.fontSize');
theme.getStyle('', '', 'fontSize');

ThemeScalePalette

interface

Properties

key
string

No description

type
'gradient' | 'class-pyramid'

No description

colors
Array<string> | Array<Array<string>>

No description

ThemeDataPalette

interface

Properties

key
string

No description

type
'pyramid' | 'row'

No description

colors
Array<string> | Array<Array<string>>

No description

ThemeColorPickerPalette

interface

Properties

key
string

No description

colors
Array<string>

No description

ThemeDataColorSpecials

interface

Properties

primary
string

No description

nil
string

No description

others
string

No description

ExportFormat

interface

Used for exporting and importing properties between backend models. An object that exports to ExportFormat should put dimensions and measures inside one data group. If an object has two hypercubes, each of the cubes should export dimensions and measures in two separate data groups. An object that imports from this structure is responsible for putting the existing properties where they should be in the new model.

Properties

data

No description

properties
object

No description

ExportDataDef

interface

Properties

dimensions
Array<EngineAPI.INxDimension>

No description

measures
Array<EngineAPI.INxMeasure>

No description

excludedDimensions
Array<EngineAPI.INxDimension>

No description

excludedMeasures
Array<EngineAPI.INxMeasure>

No description

interColumnSortOrder
Array<number>

No description

ConversionType

interface

ConversionTypeimportProperties(args)

importProperties

Imports properties for a chart with a hypercube.

Parameters

args

No description

Returns

Object

A properties tree

ConversionTypeexportProperties(args)

exportProperties

Exports properties for a chart with a hypercube.

Parameters

args

No description

Returns

Used for exporting and importing properties between backend models. An object that exports to ExportFormat should put dimensions and measures inside one data group. If an object has two hypercubes, each of the cubes should export dimensions and measures in two separate data groups. An object that imports from this structure is responsible for putting the existing properties where they should be in the new model.

hyperCubeConversion

interface
implementsConversionType

EnigmaMockerOptions

interface
experimental

Options for Enigma Mocker

Properties

delay
experimental
number

Simulate delay (in ms) for calls in enigma-mocker.

Was this page helpful?