Nebula.js: stardust
Product and framework agnostic integration API for Qlik's Associative Engine
embed(app, instanceConfig?)
functionInitiates 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)
functionCreates 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)
functionCreates 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?)
functionTriggers 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)
functionCreates 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?)
functionRuns 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()
functionGets the HTMLElement this visualization is rendered into.
Returns
HTMLElement | No description |
import { useElement } from '@nebula.js/stardust';
// ...
const el = useElement();
el.innerHTML = 'Hello!';
useRect()
functionGets 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()
functionGets 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()
functionGets 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()
functionGets 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()
functionGets 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()
functionGets 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()
functionGets 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()
functionGets 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()
functionGets the theme.
Returns
The theme. |
import { useTheme } from '@nebula.js/stardust';
const theme = useTheme();
console.log(theme.getContrastinColorTo('#ff0000'));
useEmbed()
functionGets the embed instance used.
Returns
The embed instance used. |
import { useEmbed } from '@nebula.js/stardust';
const embed = useEmbed();
embed.render(...)
useTranslator()
functionGets the translator.
Returns
The translator. |
import { useTranslator } from '@nebula.js/stardust';
// ...
const translator = useTranslator();
console.log(translator.get('SomeString'));
useDeviceType()
functionGets the device type. ('touch' or 'desktop')
Returns
string | device type. |
import { useDeviceType } from '@nebula.js/stardust';
// ...
const deviceType = useDeviceType();
if (deviceType === 'touch') { ... };
usePlugins()
functionGets 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?)
functionRegisters 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()
functionGets 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()
functionGets 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()
functionGets 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?)
functionThis 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)
functionRegisters 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()
functionGets 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()
functionGets 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()
functionGets 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
namespaceProvides 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
hyperCubeConversionProvides conversion functionality to extensions with hyperCubes.
EnigmaMocker
namespaceMocks Engima app functionality for demo and testing purposes.
EnigmaMockerfromGenericObjects(genericObjects, options?)
functionMocks 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 experimental | 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
interfaceProperties
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
interfaceProperties
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)
LoadTypeFallback load function for missing types
Parameters
type | No description |
Returns
No description |
Configurationcontext
ContextSettings 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
ConstraintsProperties
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
InteractionsProperties
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
interfaceProperties
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
ConstraintsProperties
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
InteractionsProperties
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
interfaceProperties
translator | No description |
deviceType string | No description |
anything object | No description |
Galaxyflags
FlagsflagsisEnabled(flag)
functionChecks 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()
classEmbedrender(cfg)
functionRenders a visualization or sheet into an HTMLElement. Visualizations can either be existing objects or created on the fly. Support for sense sheets is experimental.
// 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)
functionCreates 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)
functionGenerates 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)
functionUpdates 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()
functionGets the app selections of this instance.
Returns
No description |
const selections = await n.selections();
selections.mount(element);
Embedfield(fieldIdentifier)
functionGets 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()
functionGets 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()
classFieldInstanceon(eventType, callback)
functionEvent 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)
functionRemove listener on instance
Parameters
eventType | event type |
callback function | handler |
FieldInstancemount(element, options?)
functionMounts 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()
functionUnmounts the field listbox from the DOM.
listbox.unmount();
type ThemeJSON
anyThemeInfo
interfaceProperties
id string | Theme identifier |
ThemeInfoload()
functionA function that should return a Promise that resolves to a raw JSON theme.
Returns
Promise<ThemeJSON> | No description |
QInfo
interfaceProperties
qId string | Generic object id |
new Sheet()
classA 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()
functionDestroys the sheet and removes it from the the DOM.
const sheet = await embed(app).render({
element,
id: "jD5Gd"
});
sheet.destroy();
new Viz()
classA 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()
functionDestroys the visualization and removes it from the the DOM.
const viz = await embed(app).render({
element,
id: 'abc'
});
viz.destroy();
VizconvertTo(newType, forceUpdate?, forcePatch?)
functionConverts 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)
functionListens 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)
functionRemoves a listener
Parameters
eventName string | Event name to remove from |
listener function | Callback function to remove |
VizgetImperativeHandle()
functionGets the specific api that a Viz exposes.
Returns
Promise<object> | object that contains the internal Viz api. |
Flags
interfaceFlagsisEnabled(flag)
functionChecks 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()
classAppSelectionsmount(element)
functionMounts the app selection UI into the provided HTMLElement.
Parameters
element HTMLElement | No description |
selections.mount(element);
AppSelectionsunmount()
functionUnmounts the app selection UI from the DOM.
selections.unmount();
new ObjectSelections()
classObjectSelectionsaddListener(eventType, callback)
functionEvent 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)
functionRemove 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)
functionParameters
paths Array<string> | No description |
Returns
Promise<undefined> | No description |
ObjectSelectionsclear()
functionReturns
Promise<undefined> | No description |
ObjectSelectionsconfirm()
functionReturns
Promise<undefined> | No description |
ObjectSelectionscancel()
functionReturns
Promise<undefined> | No description |
ObjectSelectionsselect(s)
functionParameters
s | No description |
Returns
No description |
ObjectSelectionscanClear()
functionReturns
boolean | No description |
ObjectSelectionscanConfirm()
functionReturns
boolean | No description |
ObjectSelectionscanCancel()
functionReturns
boolean | No description |
ObjectSelectionsisActive()
functionReturns
boolean | No description |
ObjectSelectionsisModal()
functionReturns
boolean | No description |
ObjectSelectionsgoModal(paths)
functionParameters
paths Array<string> | No description |
Returns
Promise<undefined> | No description |
ObjectSelectionsnoModal(accept?)
functionParameters
accept default=false boolean | No description |
Returns
Promise<undefined> | No description |
type Field
string | EngineAPI.INxDimension | EngineAPI.INxMeasure | LibraryFieldCreateConfig
interfaceRendering 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
interfaceConfiguration 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
interfaceProperties
qLibraryId string | No description |
type 'dimension'
| 'measure' | No description |
Plugin
interfaceAn 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
functionThe implementation of the plugin. Input and return value is up to the plugin implementation to decide based on its purpose.
LoadType(type)
interfaceParameters
type | No description |
Returns
No description |
TypeInfo
interfaceProperties
name string | No description |
version string | No description |
meta object | No description |
TypeInfoload(type)
LoadTypeParameters
type | No description |
Returns
No description |
ActionToolbarElement
interfaceProperties
className 'njs-action-toolbar-popover' | No description |
ActionElement
interfaceProperties
className 'njs-cell-action' | No description |
CellElement
interfaceProperties
className 'njs-cell' | No description |
CellTitle
interfaceProperties
className 'njs-cell-title' | No description |
CellSubTitle
interfaceProperties
className 'njs-cell-sub-title' | No description |
SheetElement
interfaceProperties
className experimental 'njs-sheet' | No description |
VizElementAttributes
interfaceProperties
data-render-count string | No description |
VizElement
interfaceProperties
className 'njs-viz' | No description |
Visualization(galaxy)
interfaceThe 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
interfaceVisualizationDefinitionqae
QAEDefinitionProperties
properties EngineAPI.IGenericObjectProperties | No description |
data | No description |
qaeimportProperties(args)
importPropertiesImports properties for a chart with a hypercube.
Parameters
args | No description |
Returns
Object | A properties tree |
qaeexportProperties(args)
exportPropertiesExports 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()
functionReturns
void | No description |
SetStateFn(newState)
interfaceParameters
newState S
| function | The new state |
type EffectCallback
functionReturns
void
| function | No description |
Rect
interfaceProperties
top number | No description |
left number | No description |
width number | No description |
height number | No description |
ActionDefinition
interfaceProperties
action A | No description |
hidden boolean | No description |
disabled boolean | No description |
icon | No description |
Constraints
interfaceProperties
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
interfaceProperties
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
interfaceProperties
pending any | No description |
restore any | No description |
new Emitter()
classThe emitter instance. Implements https://nodejs.org/api/events.html#class-eventemitter.
Keyboard
interfaceProperties
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)
functionFunction used by the visualization to tell Nebula it wants to relinquish focus
Parameters
boolean | No description |
Keyboardfocus()
functionFunction used by the visualization to tell Nebula it wants to focus
KeyboardfocusSelection(Type boolean)
functionFunction used by the visualization to tell Nebula that focus the selection toolbar
Parameters
boolean | No description |
importProperties(args)
functionImports properties for a chart with a hypercube.
Parameters
args | No description |
Returns
Object | A properties tree |
exportProperties(args)
functionExports 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
interfaceProperties
properties EngineAPI.IGenericObjectProperties | No description |
data | No description |
QAEDefinitionimportProperties(args)
importPropertiesImports properties for a chart with a hypercube.
Parameters
args | No description |
Returns
Object | A properties tree |
QAEDefinitionexportProperties(args)
exportPropertiesExports 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
interfaceProperties
path string | No description |
DataTargetdimensions
FieldTargetProperties
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)
fieldTargetAddedCallbackParameters
field T | No description |
properties EngineAPI.IGenericObjectProperties | No description |
dimensionsremoved(field, properties, index)
fieldTargetRemovedCallbackParameters
field T | No description |
properties EngineAPI.IGenericObjectProperties | No description |
index number | No description |
DataTargetmeasures
FieldTargetProperties
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)
fieldTargetAddedCallbackParameters
field T | No description |
properties EngineAPI.IGenericObjectProperties | No description |
measuresremoved(field, properties, index)
fieldTargetRemovedCallbackParameters
field T | No description |
properties EngineAPI.IGenericObjectProperties | No description |
index number | No description |
fieldTargetAddedCallback(field, properties)
functionParameters
field T | No description |
properties EngineAPI.IGenericObjectProperties | No description |
fieldTargetRemovedCallback(field, properties, index)
functionParameters
field T | No description |
properties EngineAPI.IGenericObjectProperties | No description |
index number | No description |
FieldTarget
interfaceProperties
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)
fieldTargetAddedCallbackParameters
field T | No description |
properties EngineAPI.IGenericObjectProperties | No description |
FieldTargetremoved(field, properties, index)
fieldTargetRemovedCallbackParameters
field T | No description |
properties EngineAPI.IGenericObjectProperties | No description |
index number | No description |
new Translator()
classTranslatorlanguage(lang?)
functionReturns current locale.
Parameters
lang string | language Locale to updated the currentLocale value |
Returns
string | current locale. |
Translatoradd(item)
functionRegisters 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?)
functionTranslates 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()
classThemename()
functionReturns theme name
Returns
string | Current theme. |
theme.name();
ThemegetDataColorScales()
functionReturns
No description |
ThemegetDataColorPalettes()
functionReturns
No description |
ThemegetDataColorPickerPalettes()
functionReturns
No description |
ThemegetDataColorSpecials()
functionReturns
No description |
ThemegetColorPickerColor(c, supportNone?)
functionResolve 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)
functionGet 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 |
|
theme.getContrastingColorTo('#400');
ThemegetStyle(basePath, path, attribute)
functionGet 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
interfaceProperties
key string | No description |
type 'gradient'
| 'class-pyramid' | No description |
colors Array<string>
| Array<Array<string>> | No description |
ThemeDataPalette
interfaceProperties
key string | No description |
type 'pyramid'
| 'row' | No description |
colors Array<string>
| Array<Array<string>> | No description |
ThemeColorPickerPalette
interfaceProperties
key string | No description |
colors Array<string> | No description |
ThemeDataColorSpecials
interfaceProperties
primary string | No description |
nil string | No description |
others string | No description |
ExportFormat
interfaceUsed 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 Array<ExportDataDef> | No description |
properties object | No description |
ExportDataDef
interfaceProperties
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
interfaceConversionTypeimportProperties(args)
importPropertiesImports properties for a chart with a hypercube.
Parameters
args | No description |
Returns
Object | A properties tree |
ConversionTypeexportProperties(args)
exportPropertiesExports 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
interfaceEnigmaMockerOptions
interfaceOptions for Enigma Mocker
Properties
delay experimental number | Simulate delay (in ms) for calls in enigma-mocker. |