/qdt-components

React Components to be used with Angular 6, React 16 and Vue 2. Connects with the Capability API and Engine API.

Primary LanguageJavaScriptMIT LicenseMIT

Banner

version

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

<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 5 component that implements qdt-components
import { Component, OnInit, 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 qdtComponent = 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 {

  @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.

prop type description
title String SELECTIONS
btnText String Clear All

QdtBarchart

This creates a barchart based on Picasso.js.

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.

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.

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.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