Skip to content

Latest commit

 

History

History
97 lines (69 loc) · 2.72 KB

QdtKpi.md

File metadata and controls

97 lines (69 loc) · 2.72 KB

QdtKpi

QdtKpi

  • This component creates a custom KPI (key performance indicator) that you can then style to fit your mashup.

Properties

prop type description
cols Array see here

Code

Vanilla JavaScript

var options = {
  config: { /* host, port, appid, etc. */ },
  connections: { /* vizApi, engineAPI */}
}

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

var element = document.getElementById('qdt1');

qdtComponents.render(
  "QdtKpi", 
  {
    cols: [`=Count( {$<Priority={'High'}, Status -={'Closed'} >} Distinct %CaseId )`],
  }, 
  element
);

React

<QdtComponent
  type="QdtKpi"
  props={{
    cols: [`=Count( {$<Priority={'High'}, Status -={'Closed'} >} Distinct %CaseId )`],
  }}
/>

Angular

// qdt-kpi.component.ts
import { Component, OnInit, ElementRef } from '@angular/core';

@Component({
  selector: 'qdt-kpi',
  templateUrl: './qdt-kpi.component.html',
})
export class QdtKpiComponent implements OnInit {

  constructor(private el: ElementRef) { }

  chart_options = {
    type: 'QdtKpi',
    props: {
      cols: [`=Count( {$<Priority={'High'}, Status -={'Closed'} >} Distinct %CaseId )`],
    },
  };

  ngOnInit() {

  }

}
<!-- html -->
<qdt-kpi [Component]="chart_options.type" [props]="chart_options.props"></qdt-kpi>

Examples


← Back to All Components