useHyperCube

useHyperCube hook. A hook allowing you to retrive data from a Qlik hypercube.#

Usage#

Hooks are a new addition in React. They let you use state and other React features without writing a class. To learn more abou hook in react please read : https://reactjs.org/docs/hooks-intro.html

The motivation for introducing hooks in React are:

It’s hard to reuse stateful logic between components
Complex components become hard to understand
Classes confuse both people and machines
Complex components become hard to understand

To solve these problems, Hooks let you use more of React’s features without classes.

We have tried to expose hooks used in the libary so that you can create your own visualisations if you wish.

import { useHyperCube } from @motor-js/core
//...
const { qLayout, qData } = useHyperCube({
    engine,
    cols,
    qCalcCondition,
  });

Once data has been retrived from the hypercube the user can then pass it on to an object to render its contents.

Props#

info

You do not need to set the Config prop if the component is a child of the Motor component

Prop	Description	Options / Example
`engine`	Configuration object to connect to the Qlik Engine, only set this if used outside of the Motor component.	`object` const {(engine, engineError)} = useEngine(config);
`cols`	Columns from Qlik Data Model to render in the chart.	`array` {[ "Case Owner Group", "=Avg([Case Duration Time])" ]}
`sortDirection`	Direction by which the chart should be sorted. CAn eith be ascending or descending.	`string` 'ASCENDING' 'ASC' 'DESCENDING' 'DESC'
`columnSortOrder`	Order of the columns on which the returned dat shoud be sorted	`array` [1,0]
`calcCondition`	Calculated condition to be met before chart can be displayed.	`shape` { qCond: "=Avg([Case Duration Time])> 5", qMsg: "Calculation condition has not been met", }
`suppressZero`	Suppress items whith zero values from being displayed in the chart	`boolean`
`otherTotalSpec`	Message to be displayed if an invalid measure is used in the cols property	`bool` `shape` { qOtherLabel: "Other", qOtherCount: "5", }

Sample Syntax#

useHyperCube configuration#

import React from "react";
import { useEngine, useHyperCube } from "@motor-js/core";

const cols = ["=Avg(price)"];

const qCalcCondition = undefined;

function HyperCube({ engine }) {

  const { qLayout, qData } = useHyperCube({
    engine,
    cols,
    qCalcCondition,
  });

  console.log("layout: ", qLayout);

  return <div></div>;
}

export default HyperCube;

......
/>

Example#

The example is based off the Consumer Sales Qlik Sense application.

Retrieve data from the model#

Retrieve data sorted by dimension.

 import { useEngine } from '@motor-js/core'

function HyperCubeDemo() {
  return (
    <Motor config={config}>

    const config={{
      host: "xxxxxxxxx",
      secure: false,
      port: xxxxx,
      prefix: "",
      appId: "xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxx",
    }}

    const cols={[
            { qField: "[Product Sub Group Desc]", qLabel: "Product Sub Group" },
            {
              qField: "=Sum( [Sales Quantity]*[Sales Price])",
              qLabel: "Revenue",
            },
          ]}

    const columnSortOrder={[1, 0]}

    const { engine, engineError } = useEngine(config);

    const {
      beginSelections,
      endSelections,
      qLayout,
      qData,
      selections,
      select,
    } = UseHyperCube({
      engine,
      cols,
      columnSortOrder
    });

    </Motor>
  );
}