Creating a navigation minimap with Enigma.js, Picasso.js and qdt-components

[Yianni_Ververis]

We have created many charts with the Engine API and Picasso.js in the past. What was missing, was the navigation bar with a minimap of the entire chart. 

[Yianni_Ververis]

We have created many charts with the Engine API and Picasso.js in the past.

Here is a list of all of them so far

https://qdt-apps.qlik.com/qdt-components/react/#/

What was missing, was the navigation bar with a minimap of the entire chart. 

Engine API has a cool method, GetHyperCubeReducedData. This returns a reduced set of points based on the zoom factor. If you pass '-1' in the options, the engine will decide for you the depth of the returned data. So if you have one million points of data, the method will still return to you 10000 cells like the hypercube but this time it will be every 100th element.

const qDataPages = await qObject.getHyperCubeReducedData('/qHyperCubeDef', [{ ...qPage }], -1, 'D1');

Then with these reduced dataset, you can use the same picasso method to render the minimap

picasso({ renderer: { prio: ['canvas'] } }).chart({
      element: this.element,
      data: [{
        type: 'q',
        key: 'qHyperCube',
        data: data.qHyperCube,
      }],
      settings: this.settings,
});

Here is the documentation
https://help.qlik.com/en-US/sense-developer/June2019/APIs/EngineAPI/services-GenericObject-GetHyperC...

Even though it is work in progress and is missing some functionality like resize and smooth scrolling, here is a live demo

https://qdt-apps.qlik.com/qdt-components/react/#/picasso-vertical-barchart

Happy Coding!!!!

Yianni