Qlik Demo Team Components

Qlik-powered components built by the Qlik Demo Team. For use with simple html, Angular6, React 16 and Vue 2

Installation

npm install --save qdt-components

Usage

Simple Html

Live Demo
Download the latest build
Add the Html

<head>
  <script type="text/javascript" src="qdt-components.js"></script>
</head>
<body>
  <qdt-component id="qdt1"></qdt-component>
</body>

Add the Javascript

<script type="text/javascript">
  var options = {
    config: {
      host: "sense-demo.qlik.com",
      secure: true,
      port: 443,
      prefix: "",
      appId: "133dab5d-8f56-4d40-b3e0-a6b401391bde"
    },
    connections: { 
      vizApi: true, 
      engineApi: true 
    }
  }
  var qdtComponents = new QdtComponents(options.config, options.connections);
  var element = document.getElementById('qdt1');
  qdtComponents.render('QdtViz', {id: 'a5e0f12c-38f5-4da9-8f3f-0e4566b28398', height:'300px'}, element);
</script>

Angular 6 (cli)

Live Demo
npm install --save qdt-components
create an Angular 6 component that implements qdt-components

import { Component, OnInit, OnDestroy, ElementRef, Input } from '@angular/core';
import QdtComponents from 'qdt-components';

const options = {
  config: {
    host: "sense-demo.qlik.com",
    secure: true,
    port: 443,
    prefix: "",
    appId: "133dab5d-8f56-4d40-b3e0-a6b401391bde"
  },
  connections: { 
    vizApi: true, 
    engineApi: true 
  }
}

const qdtComponents = new QdtComponents(options.config, options.connections);

@Component({
  selector: 'qdt-component',
  templateUrl: './qdt-component.component.html',
  styleUrls: ['./qdt-component.component.less']
})
export class QdtComponent implements OnInit, OnDestroy {

  @Input() type: string;
  @Input() props: object;

  constructor(private elementRef: ElementRef) { }

  ngOnInit() {
    qdtComponents.render(this.type, this.props, this.elementRef.nativeElement);
  }

  ngOnDestroy() {
    QdtComponents.unmountQdtComponent(this.elementRef.nativeElement)
  }
}

React

Live Demo
npm install --save qdt-components
create a React component that implements qdt-components

import React from 'react';
import PropTypes from 'prop-types';
import QdtComponents from 'qdt-components';

const options = {
  config: {
    host: "sense-demo.qlik.com",
    secure: true,
    port: 443,
    prefix: "",
    appId: "133dab5d-8f56-4d40-b3e0-a6b401391bde"
  },
  connections: { 
    vizApi: true, 
    engineApi: true 
  }
}

const qdtComponents = new QdtComponents(options.config, options.connections);

export default class QdtComponent extends React.Component {
  static propTypes = {
    type: PropTypes.string.isRequired,
    props: PropTypes.object.isRequired,
  }
  componentDidMount() {
    const { type, props } = this.props;
    qdtComponents.render(type, props, this.node);
  }

  componentWillUnmount() {
    QdtComponents.unmountQdtComponent(this.node)
  }

  render() {
    return (
      <div ref={(node) => { this.node = node; }} />
    );
  }
}

Vue

Component Docs

QdtViz

This component can be used to create or get a native Qlik Sense viz. If you define the id prop, then it will get that Qlik Sense viz. If you define the type, cols, and options props it will create a new viz. The width and height props are both optional, and default to '100%'.

prop	type	description
id	String	Id for an existing visualization
type	String	see here
cols	Array	see here
options	Object	see here
width	String	Sets width of viz
height	String	Sets height of viz
exportData	Boolean	Show button for export in CSV
exportDataTitle	String	Optional. Set the button title. Defaults to `Export Data`
eportDataOptions	Object	see here. Defaults to `{ format: 'CSV_T', state: 'P' }`
exportImg	Boolean	Show button for export in JPG
exportImgTitle	String	Optional. Set the button title. Defaults to `Export Image`
eportImgOptions	Object	see here. Defaults to `{ width: 300, height: 400, format: 'JPG' }`
exportPdf	Boolean	Show button for export in PDF
exportPdfTitle	String	Optional. Set the button title. Defaults to `Export Pdf`
eportPdfOptions	Object	see here. Default to `{ documentSize: 'A4', orientation: 'landscape', aspectRatio: 2 }`

QdtFilter

This creates a custom filter dropdown. If cols is defined, qListObjectDef will be ignored.

prop	type	description
cols	Array	see here
qListObjectDef	Object	see here
single	Boolean	Default `false`. For single selections
placeholder	String	Default `DropDown`
expanded	Boolean	Default `false`. For a list like menu instead of a dropdown
expandedHorizontal	Boolean	Default `false`. For a horizontal menu
expandedHorizontalSense	Boolean	Default `true`. For a Qlik sense style selections look and feel. If `false` then they are regular tabs
autoSortByState	Number	Default `1`. [see here][https://help.qlik.com/en-US/sense-developer/June2018/APIs/EngineAPI/genericobject-property-ListObjectDef.html]

QdtSelectionToolbar

This populated a toolbar with the current app selections.

Live Example.

prop	type	description
title	String	`SELECTIONS`
btnText	String	`Clear All`

QdtBarchart

This creates a barchart based on Picasso.js.

Live Example.

prop	type	description
type	String	`horizontal`
cols	Array	`[dimension, measure]`
options	Object	`barcolor`
width	String	Sets width of viz, default 100%
height	String	Sets height of viz, default 100%

QdtPicasso

This creates a Line Chart based on Picasso.js.

Live Example.

prop	type	description
type	String	`comboLineBarchart`, `horizontalBarchart`, `lineChart`, `multiLineChart`, `pie`, `piechart`, `scatterplot`, `verticalBarchart`, `stackedBarchart`, `verticalGauge`, `verticalRangeGauge`, `rangeArea`
cols	Array	`[dimension, measure]`
options	Object	`color`
prio	String	`canvas` or `svg`. If omitted, it defaults to canvas

QdtSearch

This creates a search input field based on Leonardo UI - input.

Tooltips are also based on Leonardo UI - Tooltip
Live Example.

prop	type	description
cols	Array	`[dimension]`
invert	Boolean	false
placeholder	String	`Search for`
tooltipDock	String	`'top', 'right', 'bottom', 'left'`
tooltipContent	String	`<h5>Tooltip Header</h5> more content here.`
showGo	Boolean	false

Version Log

1.3.13 Adapt for Qlik Core scaling https://github.com/qlik-oss/core-scaling
1.3.12 Expose globals like qlik and qlik.resize() so they can be used in mashups like const globals = QdtComponents.globals
1.3.11 Add Qlik color palette
1.3.10 Fix the download url for the exportData img and pdf
1.3.9 Fixes for the picasso horizontal bar chart Add qInterColumnSortOrder, qSuppressZero, qSortByNumeric in the withHyperCube Update picasso to 0.15.0 (Fixed many tooltip and selection issues).
1.3.8 Add export button(s) the visualization from the Capability API to Csv, Image and Pdf
1.3.7 Abort all selections before beginSelections is called to avoid errors on more than one components on the same page. Bumpup qdt-lui.
1.3.6 QdtFilter - Add sorting by Ascii and LoadOrder
1.3.5 QdtFilter UI changes. Placeholder with selectionson the dropdown
1.3.4 Add qSortByLoadOrder in the withListObject. Fix QdtFilter on single selection to close the dropDown and add the selection in the placeholder. Various css ui changes
1.3.3 Fix Gauge labels and range area point stroke
1.3.2 Expose Interactions to the Dom.
1.3.1 Add Theme coloring for picasso charts.
1.3.0 Bump up Picasso.js. Change the tooltip to the new one from Picasso. Break Picasso settings into reusable components and expose them to the Dom.
1.2.1 bumpup qdt-lui to include the tabset.
1.2.0 QdtFilter - add tabset for horizontal menu.
1.1.70 QdtPicasso - add rangeArea chart
1.1.69 QdtPicasso - add prio prop for rendering svg. It defaults to canvas
1.1.68 Better unmount handling thnx to @humean (Michael Rutter)
1.1.67 Add Vertical Bar Gauge
1.1.66 Add Vertical Bar Gauge with Range Limits

czepter/qdt-components