miralemd / mekaarogram

Display a hierarchy in the most amazing way ever!

Mekaarogram

A Qlik Sense extension used to display hierarchical structures from multiple dimensions.

Usage

Property settings

Data

Dimensions

The dimensions controls the way the tree is built. Works in the same way as a pivot table with all dimensions under the row section.

Color

Sets the color of each bubble.

Emoticon

A symbol to show inside each bubble:

• Single letter

  Any single letter you can think of: 'S', '$', '汉' ...

  

• Emoji

  A small set of emojis: ':)', ':|', ':(', ':p', ':o', ';)'

  

• Qlik icons

  Icons from the LUI icons set, prefix with q- followed by the ascii number representing the icon: 'q-33', 'q-239' ...

  

• Material icons

  Icons from Google's Materical Icons set.

  Prefix with m- followed by the name: 'm-favorite', 'm-star', 'm-share' ...

Measures

The values of the measure controls the size of each bubble.

Color

Same as for Dimension. The expression on the dimensions takes precedence.

Emoticon

Same as for Dimension. The expression on the dimensions takes precedence.

Appearance

Presentation

Bubble size

Controls the range in size on the bubbles.

Fully expanded

Controls if the tree should be fully expanded or allow users to expand/collapse each node separately (applicable only when 2 or more dimensions are used).

Dynamic link width

When selected, the link between nodes will adapt its width based on the size of the child node it links to (applicable only when 2 or more dimensions are used).

Radial

When selected, show a radial version of the tree.

Interaction

Selection

Selection works just like in most of the Sense charts with an additional "linked selection" feature.

Collapse/expand nodes

When using multiple dimensions and property Fully expanded is disabled, nodes that can be expanded/collapsed will have a thick border.

Nodes can be expanded/collapsed by holding down SHIFT while clicking on the node.

On touch devices, simply swipe right/left to expand/collapse.

Download

Go to releases and download the file mekaarogram-v<x.y.z>.zip for the relevant release.

Development

To create a production build:

yarn run build

License

MIT

mekaarogram's Issues

Problem with extention in QS

Having some trouble with the extention on qlik sense, Link to the community post:
https://community.qlik.com/t5/Qlik-Sense-App-Development/Weird-hierarchical-data/m-p/1577384#M42066

Mouseover texts are not enabled

Two requests:

1. Request to enable mouseover pop-ups to display full texts on hovering individual strings in bubble/box.
2. Maximum number of dimensions currently supported is 10. Request to increase dimensions till 20.

Option to include hyperlinks

Hello,
First of all, congratulations in your extension, it is great.

Would it be possible to include hyperlinks in the dimensions?
A similar setting as in the straight tables, where you can choose to represent a dimension as "url" and select a different field for the url label.

Many thanks!

Unknown provider: qvChartTooltipServiceProvider

Context

Qlik Sense June 2020 (qliksenseserver:13.82.4)
Chrome 85.0.4183.83
AngularJS 1.7.9

Expected Behavior

Tooltip is shown on hover

Current Behavior

Tooltip not shown on hover

Stacktrace

angular.f3474dac8e69fe28e273.js:formatted:6012 Error: [$injector:unpr] Unknown provider: qvChartTooltipServiceProvider <- qvChartTooltipService
https://errors.angularjs.org/1.7.9/$injector/unpr?p0=qvChartTooltipServiceProvider%20%3C-%20qvChartTooltipService
    at angular.f3474dac8e69fe28e273.js:formatted:635
    at angular.f3474dac8e69fe28e273.js:formatted:2439
    at Object.s [as get] (angular.f3474dac8e69fe28e273.js:formatted:2563)
    at angular.f3474dac8e69fe28e273.js:formatted:2444
    at Object.s [as get] (angular.f3474dac8e69fe28e273.js:formatted:2563)
    at Object.GMLQ.Ot.getService (qvangular.341f14df736283de91e2.js:9)
    at eval (tooltip.js?042e:98)
    at angular.f3474dac8e69fe28e273.js:formatted:9016
    at Gi.o [as completeTask] (angular.f3474dac8e69fe28e273.js:formatted:8859)
    at angular.f3474dac8e69fe28e273.js:formatted:3185

Steps to reproduce the behavior

1. Use Qlik Sense June 2020 or later
2. yarn install
3. yarn build
4. copy and package as a zip the content of the dist folder
5. import it into Qlik Sense and test the extension

Error when trying to import to QS Enterprise Jun 2019

Option to hide zero values