NebulaContainer

Usage

This component enables you to embed a Qlik visualisation into your mashup. Either using the id of an existing object or by defining the column definition yourself. Both examples are demonstrated below

Embedding with Object ID

import { NebulaContainer } from '@motor-js/nebula'
  
const App = () => {

  return (
    <NebulaContainer 
      render={{
        id: '934a6a81-3ae1-432a-be51-199f634ffadb',
      }}
      styles={{
        width: '80%',
        height: 400,
        paddingTop: 50,
      }}
    />
  )
  
}

export default App

Embedding with Cols definition

import { NebulaContainer } from '@motor-js/nebula'
  
const App = () => {

  return (
    <NebulaContainer 
      render={{
        type: 'linechart',
        fields: ['Company Name', '=sum(Quantity)'],
        properties: {
          title: 'Example Title',
          subtitle: 'Example Sub Title',
          footnote: 'Example Footer'
        },
      }}
      styles={{
        width: '80%',
        height: 400,
        paddingTop: 50,
      }}
    />
  )
  
}

export default App

Chart Types

This package comes bundled with the following nebula chart types

• barchart

• linechart

• table

• combochart

• piechart

• mekkochart

• funnelchart

• sankeychart

Props