@valtimo/process 4.15.3-next-main.16 → 4.17.0

package/fesm2015/valtimo-process.js

@@ -8,432 +8,466 @@ import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import * as BpmnJS from 'bpmn-js/dist/bpmn-navigated-viewer.production.min.js';
 import { create } from 'heatmap.js-fixed/build/heatmap.js';
 
-/*
- * Copyright 2015-2020 Ritense BV, the Netherlands.
- *
- * Licensed under EUPL, Version 1.2 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" basis,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-class ProcessService {
-    constructor(http, configService) {
-        this.http = http;
-        this.valtimoEndpointUri = configService.config.valtimoApi.endpointUri;
-    }
-    getProcessDefinitions() {
-        return this.http.get(`${this.valtimoEndpointUri}process/definition`);
-    }
-    getProcessDefinitionVersions(key) {
-        return this.http.get(`${this.valtimoEndpointUri}process/definition/${key}/versions`);
-    }
-    getProcessDefinition(key) {
-        return this.http.get(`${this.valtimoEndpointUri}process/definition/${key}`);
-    }
-    getProcessDefinitionStartFormData(processDefinitionKey) {
-        return this.http.get(`${this.valtimoEndpointUri}process/definition/${processDefinitionKey}/start-form`);
-    }
-    startProcesInstance(key, businessKey, variables) {
-        return this.http.post(`${this.valtimoEndpointUri}process/definition/${key}/${businessKey}/start`, variables);
-    }
-    getProcessDefinitionXml(processDefinitionId) {
-        return this.http.get(`${this.valtimoEndpointUri}process/definition/${processDefinitionId}/xml`);
-    }
-    getProcessXml(id) {
-        return this.http.get(`${this.valtimoEndpointUri}process/${id}/xml`);
-    }
-    getProcessCount(id) {
-        return this.http.post(`${this.valtimoEndpointUri}v2/process/definition/${id}/count`, {
-            key: id,
-            processVariables: [{ '@type': 'boolean', name: 'active', value: true }],
-        });
-    }
-    getProcessHeatmapCount(processDefinition) {
-        return this.http.get(`${this.valtimoEndpointUri}process/definition/${processDefinition.key}/heatmap/count?version=${processDefinition.version}`);
-    }
-    getProcessHeatmapDuration(processDefinition) {
-        return this.http.get(`${this.valtimoEndpointUri}process/definition/${processDefinition.key}/heatmap/duration?version=${processDefinition.version}`);
-    }
-    getProcessInstances(key, page, size, sort) {
-        const params = new HttpParams()
-            .set('page', page.toString())
-            .set('size', size.toString())
-            .set('sort', sort);
-        return this.http.post(`${this.valtimoEndpointUri}v2/process/${key}/search`, {}, { params: params });
-    }
-    getProcessInstance(processInstanceId) {
-        return this.http.get(`${this.valtimoEndpointUri}process/${processInstanceId}`, {});
-    }
-    getProcessInstanceTasks(id) {
-        return this.http.get(`${this.valtimoEndpointUri}process/${id}/tasks`, {});
-    }
-    getProcessInstanceVariables(id, variableNames) {
-        return this.http.post(`${this.valtimoEndpointUri}process-instance/${id}/variables`, variableNames);
-    }
-    addProcessInstancesDefaultVariablesValues(processInstances) {
-        processInstances.forEach(processInstance => this.addDefaultVariablesValues(processInstance));
-        return processInstances;
-    }
-    addDefaultVariablesValues(processInstance) {
-        if (!processInstance['startUser']) {
-            processInstance.startUser = processInstance.startUserId;
-        }
-        if (!processInstance['processStarted']) {
-            processInstance.processStarted = processInstance.startTime;
-        }
-        if (!processInstance['processEnded']) {
-            processInstance.processEnded = processInstance.endTime;
-        }
-        if (!processInstance['active']) {
-            processInstance.active = processInstance.endTime == null;
-        }
-        return processInstance;
-    }
-    getInstancesStatistics(fromDate, toDate, processFilter) {
-        const params = new HttpParams();
-        params.set('fromDate', fromDate);
-        params.set('toDate', toDate);
-        params.set('processFilter', processFilter);
-        return this.http.get(`${this.valtimoEndpointUri}reporting/instancesstatistics`, {
-            params: params,
-        });
-    }
-    deployProcess(processXml) {
-        const formData = new FormData();
-        formData.append('file', new File([processXml], 'process.bpmn'));
-        formData.append('deployment-name', 'valtimoConsoleApp');
-        formData.append('deployment-source', 'process application');
-        return this.http.post(`${this.valtimoEndpointUri}camunda-rest/engine/default/deployment/create`, formData);
-    }
-    migrateProcess(processDefinition1Id, processDefinition2Id, params) {
-        return this.http.post(`${this.valtimoEndpointUri}process/definition/${processDefinition1Id}/${processDefinition2Id}/migrate`, params);
-    }
-}
-ProcessService.ɵprov = ɵɵdefineInjectable({ factory: function ProcessService_Factory() { return new ProcessService(ɵɵinject(HttpClient), ɵɵinject(ConfigService)); }, token: ProcessService, providedIn: "root" });
-ProcessService.decorators = [
-    { type: Injectable, args: [{
-                providedIn: 'root',
-            },] }
-];
-ProcessService.ctorParameters = () => [
-    { type: HttpClient },
-    { type: ConfigService }
+/*
+ * Copyright 2015-2020 Ritense BV, the Netherlands.
+ *
+ * Licensed under EUPL, Version 1.2 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" basis,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/*
+ *
+ *  * Copyright 2015-2020 Ritense BV, the Netherlands.
+ *  *
+ *  * Licensed under EUPL, Version 1.2 (the "License");
+ *  * you may not use this file except in compliance with the License.
+ *  * You may obtain a copy of the License at
+ *  *
+ *  * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
+ *  *
+ *  * Unless required by applicable law or agreed to in writing, software
+ *  * distributed under the License is distributed on an "AS IS" basis,
+ *  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *  * See the License for the specific language governing permissions and
+ *  * limitations under the License.
+ *
+ */
+
+/*
+ * Copyright 2015-2020 Ritense BV, the Netherlands.
+ *
+ * Licensed under EUPL, Version 1.2 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" basis,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+class ProcessService {
+    constructor(http, configService) {
+        this.http = http;
+        this.valtimoEndpointUri = configService.config.valtimoApi.endpointUri;
+    }
+    getProcessDefinitions() {
+        return this.http.get(`${this.valtimoEndpointUri}process/definition`);
+    }
+    getProcessDefinitionVersions(key) {
+        return this.http.get(`${this.valtimoEndpointUri}process/definition/${key}/versions`);
+    }
+    getProcessDefinition(key) {
+        return this.http.get(`${this.valtimoEndpointUri}process/definition/${key}`);
+    }
+    getProcessDefinitionStartFormData(processDefinitionKey) {
+        return this.http.get(`${this.valtimoEndpointUri}process/definition/${processDefinitionKey}/start-form`);
+    }
+    startProcesInstance(key, businessKey, variables) {
+        return this.http.post(`${this.valtimoEndpointUri}process/definition/${key}/${businessKey}/start`, variables);
+    }
+    getProcessDefinitionXml(processDefinitionId) {
+        return this.http.get(`${this.valtimoEndpointUri}process/definition/${processDefinitionId}/xml`);
+    }
+    getProcessXml(id) {
+        return this.http.get(`${this.valtimoEndpointUri}process/${id}/xml`);
+    }
+    getProcessCount(id) {
+        return this.http.post(`${this.valtimoEndpointUri}v2/process/definition/${id}/count`, {
+            key: id,
+            processVariables: [{ '@type': 'boolean', name: 'active', value: true }],
+        });
+    }
+    getProcessHeatmapCount(processDefinition) {
+        return this.http.get(`${this.valtimoEndpointUri}process/definition/${processDefinition.key}/heatmap/count?version=${processDefinition.version}`);
+    }
+    getProcessHeatmapDuration(processDefinition) {
+        return this.http.get(`${this.valtimoEndpointUri}process/definition/${processDefinition.key}/heatmap/duration?version=${processDefinition.version}`);
+    }
+    getProcessInstances(key, page, size, sort) {
+        const params = new HttpParams()
+            .set('page', page.toString())
+            .set('size', size.toString())
+            .set('sort', sort);
+        return this.http.post(`${this.valtimoEndpointUri}v2/process/${key}/search`, {}, { params: params });
+    }
+    getProcessInstance(processInstanceId) {
+        return this.http.get(`${this.valtimoEndpointUri}process/${processInstanceId}`, {});
+    }
+    getProcessInstanceTasks(id) {
+        return this.http.get(`${this.valtimoEndpointUri}process/${id}/tasks`, {});
+    }
+    getProcessInstanceVariables(id, variableNames) {
+        return this.http.post(`${this.valtimoEndpointUri}process-instance/${id}/variables`, variableNames);
+    }
+    addProcessInstancesDefaultVariablesValues(processInstances) {
+        processInstances.forEach(processInstance => this.addDefaultVariablesValues(processInstance));
+        return processInstances;
+    }
+    addDefaultVariablesValues(processInstance) {
+        if (!processInstance['startUser']) {
+            processInstance.startUser = processInstance.startUserId;
+        }
+        if (!processInstance['processStarted']) {
+            processInstance.processStarted = processInstance.startTime;
+        }
+        if (!processInstance['processEnded']) {
+            processInstance.processEnded = processInstance.endTime;
+        }
+        if (!processInstance['active']) {
+            processInstance.active = processInstance.endTime == null;
+        }
+        return processInstance;
+    }
+    getInstancesStatistics(fromDate, toDate, processFilter) {
+        const params = new HttpParams();
+        params.set('fromDate', fromDate);
+        params.set('toDate', toDate);
+        params.set('processFilter', processFilter);
+        return this.http.get(`${this.valtimoEndpointUri}reporting/instancesstatistics`, {
+            params: params,
+        });
+    }
+    deployProcess(processXml) {
+        const formData = new FormData();
+        formData.append('file', new File([processXml], 'process.bpmn'));
+        formData.append('deployment-name', 'valtimoConsoleApp');
+        formData.append('deployment-source', 'process application');
+        return this.http.post(`${this.valtimoEndpointUri}camunda-rest/engine/default/deployment/create`, formData);
+    }
+    migrateProcess(processDefinition1Id, processDefinition2Id, params) {
+        return this.http.post(`${this.valtimoEndpointUri}process/definition/${processDefinition1Id}/${processDefinition2Id}/migrate`, params);
+    }
+}
+ProcessService.ɵprov = ɵɵdefineInjectable({ factory: function ProcessService_Factory() { return new ProcessService(ɵɵinject(HttpClient), ɵɵinject(ConfigService)); }, token: ProcessService, providedIn: "root" });
+ProcessService.decorators = [
+    { type: Injectable, args: [{
+                providedIn: 'root',
+            },] }
+];
+ProcessService.ctorParameters = () => [
+    { type: HttpClient },
+    { type: ConfigService }
 ];
 
-/*
- * Copyright 2015-2020 Ritense BV, the Netherlands.
- *
- * Licensed under EUPL, Version 1.2 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" basis,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-class ProcessDiagramComponent {
-    constructor(processService) {
-        this.processService = processService;
-        this.importDone = new EventEmitter();
-        this.enumHeatmapOptions = ['count', 'duration'];
-    }
-    ngOnInit() {
-        if (this.processDefinitionKey) {
-            this.loadProcessDefinitionFromKey(this.processDefinitionKey);
-        }
-        if (this.processInstanceId) {
-            this.loadProcessInstanceXml(this.processInstanceId);
-        }
-        this.bpmnJS = new BpmnJS();
-        this.bpmnJS.on('import.done', ({ error }) => {
-            if (!error) {
-                const canvas = this.bpmnJS.get('canvas'), eventBus = this.bpmnJS.get('eventBus');
-                if (this.processDiagram.historicActivityInstances) {
-                    this.processDiagram.historicActivityInstances.forEach(instance => {
-                        // exclude multiInstanceBody
-                        if (instance.activityType !== 'multiInstanceBody') {
-                            canvas.addMarker(instance.activityId, instance.endTime ? 'highlight-overlay-past' : 'highlight-overlay-current');
-                        }
-                    });
-                }
-                canvas.zoom('fit-viewport', 'auto');
-                if (this.processDefinitionVersions) {
-                    eventBus.on('canvas.init', () => {
-                        if (this.showHeatmap) {
-                            this.clearHeatmap();
-                        }
-                        this.loadHeatmapData();
-                    });
-                    eventBus.on('canvas.viewbox.changing', () => {
-                        if (this.showHeatmap) {
-                            this.clearHeatmap();
-                        }
-                    });
-                    eventBus.on('canvas.viewbox.changed', () => {
-                        this.loadHeatmapData();
-                    });
-                }
-            }
-        });
-    }
-    ngOnChanges() {
-        if (this.processDefinitionKey) {
-            this.loadProcessDefinitionFromKey(this.processDefinitionKey);
-        }
-        else if (this.processInstanceId) {
-            this.loadProcessInstanceXml(this.processInstanceId);
-        }
-    }
-    ngOnDestroy() {
-        if (this.bpmnJS) {
-            this.bpmnJS.destroy();
-        }
-    }
-    loadProcessDefinition(processDefinitionKey) {
-        this.processService.getProcessDefinition(processDefinitionKey).subscribe(response => {
-            this.heatmapOption = this.enumHeatmapOptions[0];
-            this.version = response.version;
-            this.loadProcessDefinitionXml(response.id);
-        });
-    }
-    loadProcessDefinitionVersions(processDefinitionKey) {
-        this.processService.getProcessDefinitionVersions(processDefinitionKey).subscribe(response => {
-            this.processDefinitionVersions = response;
-        });
-    }
-    loadProcessDefinitionFromKey(processDefinitionKey) {
-        this.loadProcessDefinitionVersions(processDefinitionKey);
-        this.loadProcessDefinition(processDefinitionKey);
-    }
-    loadProcessDefinitionXml(processDefinitionId) {
-        this.processService.getProcessDefinitionXml(processDefinitionId).subscribe(response => {
-            this.processDiagram = response;
-            this.bpmnJS.importXML(this.processDiagram.bpmn20Xml);
-            this.bpmnJS.attachTo(this.el.nativeElement);
-        });
-    }
-    loadProcessInstanceXml(processInstanceId) {
-        this.processService.getProcessXml(processInstanceId).subscribe(response => {
-            this.processDiagram = response;
-            this.bpmnJS.importXML(this.processDiagram.bpmn20Xml);
-            this.bpmnJS.attachTo(this.el.nativeElement);
-        });
-    }
-    loadProcessDefinitionHeatmapCount(processDefinition) {
-        this.processService.getProcessHeatmapCount(processDefinition).subscribe(response => {
-            this.inputData = response;
-            this.valueKey = 'totalCount';
-            this.heatPoints = { data: [] };
-            this.min = 0;
-            this.max = 0;
-            Object.keys(this.inputData).forEach(key => {
-                const diagramContainer = this.el.nativeElement.querySelector('svg').getBoundingClientRect(), diagramElm = this.el.nativeElement
-                    .querySelector(`g[data-element-id=${key}]`)
-                    .getBoundingClientRect();
-                this.setMax(key);
-                this.heatPoints.data.push({
-                    x: Math.round(diagramElm.x - diagramContainer.x + diagramElm.width / 2),
-                    y: Math.round(diagramElm.y - diagramContainer.y + diagramElm.height / 2),
-                    value: this.inputData[key][this.valueKey],
-                    radius: diagramElm.width / 2,
-                });
-                this.addCounterActiveOverlays(key, this.inputData);
-            });
-            this.clearHeatmap();
-            if (this.showHeatmap) {
-                this.loadHeatmap();
-            }
-        });
-    }
-    onWindowResize() {
-        const oldCanvas = this.el.nativeElement.querySelector('canvas[class=heatmap-canvas]');
-        if (oldCanvas) {
-            oldCanvas.remove();
-            this.heatMapInstance = null;
-        }
-        if (this.showHeatmap) {
-            this.loadHeatmap();
-        }
-    }
-    loadProcessDefinitionHeatmapDuration(processDefinition) {
-        this.processService.getProcessHeatmapDuration(processDefinition).subscribe(response => {
-            this.inputData = response;
-            this.valueKey = 'averageDurationInMilliseconds';
-            this.heatPoints = { data: [] };
-            this.min = 0;
-            this.max = 0;
-            Object.keys(this.inputData).forEach(key => {
-                const diagramContainer = this.el.nativeElement.querySelector('svg').getBoundingClientRect(), diagramElm = this.el.nativeElement
-                    .querySelector(`g[data-element-id=${key}]`)
-                    .getBoundingClientRect();
-                this.setMax(key);
-                this.heatPoints.data.push({
-                    x: Math.round(diagramElm.x - diagramContainer.x + diagramElm.width / 2),
-                    y: Math.round(diagramElm.y - diagramContainer.y + diagramElm.height / 2),
-                    value: this.inputData[key][this.valueKey],
-                    radius: diagramElm.width / 2,
-                });
-                this.addCounterActiveOverlays(key, this.inputData);
-            });
-            this.clearHeatmap();
-            if (this.showHeatmap) {
-                this.loadHeatmap();
-            }
-        });
-    }
-    setProcessDefinitionKey(processDefinitionKey) {
-        this.processDefinitionKey = processDefinitionKey;
-        this.loadProcessDefinitionFromKey(this.processDefinitionKey);
-    }
-    setProcessDefinitionVersion(version) {
-        this.version = +version;
-        this.loadHeatmapData();
-    }
-    setHeatmapOption(heatmapOption) {
-        this.heatmapOption = heatmapOption;
-        this.loadHeatmapData();
-    }
-    toggleShowHeatmap() {
-        this.showHeatmap = !this.showHeatmap;
-        this.loadHeatmapData();
-    }
-    loadHeatmap() {
-        if (!this.heatMapInstance) {
-            this.heatMapInstance = create({
-                radius: 54,
-                blur: 0.7,
-                maxOpacity: 0.4,
-                minOpacity: 0,
-                container: this.el.nativeElement,
-            });
-        }
-        this.heatMapInstance.setData({
-            min: this.min,
-            max: this.max,
-            data: this.heatPoints.data,
-        });
-    }
-    clearHeatmap() {
-        if (this.heatMapInstance) {
-            this.heatMapInstance.setData({ data: [] });
-        }
-    }
-    loadHeatmapData() {
-        this.processDefinition = this.processDefinitionVersions.find(definition => definition.version === this.version);
-        if (this.heatmapOption === 'count') {
-            this.loadProcessDefinitionHeatmapCount(this.processDefinition);
-        }
-        if (this.heatmapOption === 'duration') {
-            this.loadProcessDefinitionHeatmapDuration(this.processDefinition);
-        }
-    }
-    setMax(key) {
-        if (this.heatmapDuration) {
-            this.max = Math.max(this.heatmapDuration[key].averageDurationInMilliseconds, this.max);
-        }
-        else if (this.heatmapCount) {
-            this.max = Math.max(this.heatmapCount[key].totalCount + this.heatmapCount[key].count, this.max);
-        }
-    }
-    addCounterActiveOverlays(key, inputData) {
-        const overlays = this.bpmnJS.get('overlays');
-        overlays.add(key, {
-            position: {
-                bottom: 13,
-                left: -12,
-            },
-            show: {
-                minZoom: 0,
-                maxZoom: 5.0,
-            },
-            html: `<span class="badge badge-pill badge-primary">${inputData[key].count}</span>`,
-        });
-    }
-}
-ProcessDiagramComponent.decorators = [
-    { type: Component, args: [{
-                selector: 'valtimo-process-diagram',
-                template: "<!--\n  ~ Copyright 2015-2020 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n<div class=\"process-diagram-container\">\n  <div *ngIf=\"processDefinitionKey\" class=\"diagram-container-switch-holder\">\n    <div class=\"container-fluid\">\n      <div class=\"row p-4 bg-light\">\n        <div class=\"col-4\">\n          <label><strong>Version</strong></label\n          ><br />\n          <select class=\"form-control\" (change)=\"setProcessDefinitionVersion($event.target.value)\">\n            <option\n              *ngFor=\"let processDefinitionVersion of processDefinitionVersions\"\n              [value]=\"processDefinitionVersion.version\"\n              [selected]=\"processDefinitionVersion.version === version\"\n            >\n              {{ processDefinitionVersion.version }}\n            </option>\n          </select>\n        </div>\n        <div class=\"col-4\">\n          <label><strong>Heatmap type</strong></label\n          ><br />\n          <select class=\"form-control\" (change)=\"setHeatmapOption($event.target.value)\">\n            <option\n              *ngFor=\"let option of enumHeatmapOptions\"\n              [value]=\"option\"\n              [selected]=\"option === heatmapOption\"\n            >\n              {{ option }}\n            </option>\n          </select>\n        </div>\n        <div class=\"col-4 text-right\">\n          <label><strong>Show heatmap</strong></label\n          ><br />\n          <div class=\"text-left switch-button switch-button-sm switch-button-success\">\n            <input\n              type=\"checkbox\"\n              id=\"toggleHeatmap\"\n              [checked]=\"showHeatmap\"\n              (click)=\"toggleShowHeatmap()\"\n            /><span> <label for=\"toggleHeatmap\"></label></span>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <div #ref (window:resize)=\"onWindowResize()\" class=\"diagram-container\"></div>\n\n  <div *ngIf=\"processInstanceId\" class=\"p-4 text-center legenda-holder\">\n    <span\n      ><div class=\"legenda highlight-overlay-past\"></div>\n      Executed tasks</span\n    >\n    <span class=\"ml-3\"\n      ><div class=\"legenda highlight-overlay-current\"></div>\n      Current tasks</span\n    >\n  </div>\n\n  <div *ngIf=\"processDefinitionKey\" class=\"p-4 text-center legenda-holder\">\n    <span\n      ><span class=\"badge badge-pill badge-primary\">N</span>&nbsp;&nbsp;Amount of currently active\n      instances of this task.</span\n    >\n    <span\n      >&nbsp;&nbsp;|&nbsp;&nbsp;Red/yellow/green orbs: The amount of times the task is executed in\n      comparison to the other tasks.</span\n    >\n  </div>\n</div>\n",
-                encapsulation: ViewEncapsulation.None,
-                styles: [".process-diagram-container .diagram-container{height:50vh;width:100%}.process-diagram-container .diagram-container-switch-holder{position:absolute;width:100%;z-index:1000}.process-diagram-container .highlight-overlay-past:not(.djs-connection) .djs-visual>:first-child{fill:#d8d8d8!important}.process-diagram-container .highlight-overlay-current:not(.djs-connection) .djs-visual>:first-child{fill:#b2e0ff!important}.process-diagram-container .legenda-holder{font-size:1em}.process-diagram-container .legenda{border:2px solid #000;border-radius:3px;display:inline-block;margin-bottom:-4px;margin-right:5px;padding:7px}.process-diagram-container .legenda.highlight-overlay-past{background-color:#d8d8d8}.process-diagram-container .legenda.highlight-overlay-current{background-color:#b2e0ff}"]
-            },] }
-];
-ProcessDiagramComponent.ctorParameters = () => [
-    { type: ProcessService }
-];
-ProcessDiagramComponent.propDecorators = {
-    el: [{ type: ViewChild, args: ['ref', { static: true },] }],
-    importDone: [{ type: Output }],
-    processDefinitionKey: [{ type: Input }],
-    processInstanceId: [{ type: Input }]
+/*
+ * Copyright 2015-2020 Ritense BV, the Netherlands.
+ *
+ * Licensed under EUPL, Version 1.2 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" basis,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+class ProcessDiagramComponent {
+    constructor(processService) {
+        this.processService = processService;
+        this.importDone = new EventEmitter();
+        this.enumHeatmapOptions = ['count', 'duration'];
+    }
+    ngOnInit() {
+        if (this.processDefinitionKey) {
+            this.loadProcessDefinitionFromKey(this.processDefinitionKey);
+        }
+        if (this.processInstanceId) {
+            this.loadProcessInstanceXml(this.processInstanceId);
+        }
+        this.bpmnJS = new BpmnJS();
+        this.bpmnJS.on('import.done', ({ error }) => {
+            if (!error) {
+                const canvas = this.bpmnJS.get('canvas'), eventBus = this.bpmnJS.get('eventBus');
+                if (this.processDiagram.historicActivityInstances) {
+                    this.processDiagram.historicActivityInstances.forEach(instance => {
+                        // exclude multiInstanceBody
+                        if (instance.activityType !== 'multiInstanceBody') {
+                            canvas.addMarker(instance.activityId, instance.endTime ? 'highlight-overlay-past' : 'highlight-overlay-current');
+                        }
+                    });
+                }
+                canvas.zoom('fit-viewport', 'auto');
+                if (this.processDefinitionVersions) {
+                    eventBus.on('canvas.init', () => {
+                        if (this.showHeatmap) {
+                            this.clearHeatmap();
+                        }
+                        this.loadHeatmapData();
+                    });
+                    eventBus.on('canvas.viewbox.changing', () => {
+                        if (this.showHeatmap) {
+                            this.clearHeatmap();
+                        }
+                    });
+                    eventBus.on('canvas.viewbox.changed', () => {
+                        this.loadHeatmapData();
+                    });
+                }
+            }
+        });
+    }
+    ngOnChanges() {
+        if (this.processDefinitionKey) {
+            this.loadProcessDefinitionFromKey(this.processDefinitionKey);
+        }
+        else if (this.processInstanceId) {
+            this.loadProcessInstanceXml(this.processInstanceId);
+        }
+    }
+    ngOnDestroy() {
+        if (this.bpmnJS) {
+            this.bpmnJS.destroy();
+        }
+    }
+    loadProcessDefinition(processDefinitionKey) {
+        this.processService.getProcessDefinition(processDefinitionKey).subscribe(response => {
+            this.heatmapOption = this.enumHeatmapOptions[0];
+            this.version = response.version;
+            this.loadProcessDefinitionXml(response.id);
+        });
+    }
+    loadProcessDefinitionVersions(processDefinitionKey) {
+        this.processService.getProcessDefinitionVersions(processDefinitionKey).subscribe(response => {
+            this.processDefinitionVersions = response;
+        });
+    }
+    loadProcessDefinitionFromKey(processDefinitionKey) {
+        this.loadProcessDefinitionVersions(processDefinitionKey);
+        this.loadProcessDefinition(processDefinitionKey);
+    }
+    loadProcessDefinitionXml(processDefinitionId) {
+        this.processService.getProcessDefinitionXml(processDefinitionId).subscribe(response => {
+            this.processDiagram = response;
+            this.bpmnJS.importXML(this.processDiagram.bpmn20Xml);
+            this.bpmnJS.attachTo(this.el.nativeElement);
+        });
+    }
+    loadProcessInstanceXml(processInstanceId) {
+        this.processService.getProcessXml(processInstanceId).subscribe(response => {
+            this.processDiagram = response;
+            this.bpmnJS.importXML(this.processDiagram.bpmn20Xml);
+            this.bpmnJS.attachTo(this.el.nativeElement);
+        });
+    }
+    loadProcessDefinitionHeatmapCount(processDefinition) {
+        this.processService.getProcessHeatmapCount(processDefinition).subscribe(response => {
+            this.inputData = response;
+            this.valueKey = 'totalCount';
+            this.heatPoints = { data: [] };
+            this.min = 0;
+            this.max = 0;
+            Object.keys(this.inputData).forEach(key => {
+                const diagramContainer = this.el.nativeElement.querySelector('svg').getBoundingClientRect(), diagramElm = this.el.nativeElement
+                    .querySelector(`g[data-element-id=${key}]`)
+                    .getBoundingClientRect();
+                this.setMax(key);
+                this.heatPoints.data.push({
+                    x: Math.round(diagramElm.x - diagramContainer.x + diagramElm.width / 2),
+                    y: Math.round(diagramElm.y - diagramContainer.y + diagramElm.height / 2),
+                    value: this.inputData[key][this.valueKey],
+                    radius: diagramElm.width / 2,
+                });
+                this.addCounterActiveOverlays(key, this.inputData);
+            });
+            this.clearHeatmap();
+            if (this.showHeatmap) {
+                this.loadHeatmap();
+            }
+        });
+    }
+    onWindowResize() {
+        const oldCanvas = this.el.nativeElement.querySelector('canvas[class=heatmap-canvas]');
+        if (oldCanvas) {
+            oldCanvas.remove();
+            this.heatMapInstance = null;
+        }
+        if (this.showHeatmap) {
+            this.loadHeatmap();
+        }
+    }
+    loadProcessDefinitionHeatmapDuration(processDefinition) {
+        this.processService.getProcessHeatmapDuration(processDefinition).subscribe(response => {
+            this.inputData = response;
+            this.valueKey = 'averageDurationInMilliseconds';
+            this.heatPoints = { data: [] };
+            this.min = 0;
+            this.max = 0;
+            Object.keys(this.inputData).forEach(key => {
+                const diagramContainer = this.el.nativeElement.querySelector('svg').getBoundingClientRect(), diagramElm = this.el.nativeElement
+                    .querySelector(`g[data-element-id=${key}]`)
+                    .getBoundingClientRect();
+                this.setMax(key);
+                this.heatPoints.data.push({
+                    x: Math.round(diagramElm.x - diagramContainer.x + diagramElm.width / 2),
+                    y: Math.round(diagramElm.y - diagramContainer.y + diagramElm.height / 2),
+                    value: this.inputData[key][this.valueKey],
+                    radius: diagramElm.width / 2,
+                });
+                this.addCounterActiveOverlays(key, this.inputData);
+            });
+            this.clearHeatmap();
+            if (this.showHeatmap) {
+                this.loadHeatmap();
+            }
+        });
+    }
+    setProcessDefinitionKey(processDefinitionKey) {
+        this.processDefinitionKey = processDefinitionKey;
+        this.loadProcessDefinitionFromKey(this.processDefinitionKey);
+    }
+    setProcessDefinitionVersion(version) {
+        this.version = +version;
+        this.loadHeatmapData();
+    }
+    setHeatmapOption(heatmapOption) {
+        this.heatmapOption = heatmapOption;
+        this.loadHeatmapData();
+    }
+    toggleShowHeatmap() {
+        this.showHeatmap = !this.showHeatmap;
+        this.loadHeatmapData();
+    }
+    loadHeatmap() {
+        if (!this.heatMapInstance) {
+            this.heatMapInstance = create({
+                radius: 54,
+                blur: 0.7,
+                maxOpacity: 0.4,
+                minOpacity: 0,
+                container: this.el.nativeElement,
+            });
+        }
+        this.heatMapInstance.setData({
+            min: this.min,
+            max: this.max,
+            data: this.heatPoints.data,
+        });
+    }
+    clearHeatmap() {
+        if (this.heatMapInstance) {
+            this.heatMapInstance.setData({ data: [] });
+        }
+    }
+    loadHeatmapData() {
+        this.processDefinition = this.processDefinitionVersions.find(definition => definition.version === this.version);
+        if (this.heatmapOption === 'count') {
+            this.loadProcessDefinitionHeatmapCount(this.processDefinition);
+        }
+        if (this.heatmapOption === 'duration') {
+            this.loadProcessDefinitionHeatmapDuration(this.processDefinition);
+        }
+    }
+    setMax(key) {
+        if (this.heatmapDuration) {
+            this.max = Math.max(this.heatmapDuration[key].averageDurationInMilliseconds, this.max);
+        }
+        else if (this.heatmapCount) {
+            this.max = Math.max(this.heatmapCount[key].totalCount + this.heatmapCount[key].count, this.max);
+        }
+    }
+    addCounterActiveOverlays(key, inputData) {
+        const overlays = this.bpmnJS.get('overlays');
+        overlays.add(key, {
+            position: {
+                bottom: 13,
+                left: -12,
+            },
+            show: {
+                minZoom: 0,
+                maxZoom: 5.0,
+            },
+            html: `<span class="badge badge-pill badge-primary">${inputData[key].count}</span>`,
+        });
+    }
+}
+ProcessDiagramComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'valtimo-process-diagram',
+                template: "<!--\n  ~ Copyright 2015-2020 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n<div class=\"process-diagram-container\">\n  <div *ngIf=\"processDefinitionKey\" class=\"diagram-container-switch-holder\">\n    <div class=\"container-fluid\">\n      <div class=\"row p-4 bg-light\">\n        <div class=\"col-4\">\n          <label><strong>Version</strong></label\n          ><br />\n          <select class=\"form-control\" (change)=\"setProcessDefinitionVersion($event.target.value)\">\n            <option\n              *ngFor=\"let processDefinitionVersion of processDefinitionVersions\"\n              [value]=\"processDefinitionVersion.version\"\n              [selected]=\"processDefinitionVersion.version === version\"\n            >\n              {{ processDefinitionVersion.version }}\n            </option>\n          </select>\n        </div>\n        <div class=\"col-4\">\n          <label><strong>Heatmap type</strong></label\n          ><br />\n          <select class=\"form-control\" (change)=\"setHeatmapOption($event.target.value)\">\n            <option\n              *ngFor=\"let option of enumHeatmapOptions\"\n              [value]=\"option\"\n              [selected]=\"option === heatmapOption\"\n            >\n              {{ option }}\n            </option>\n          </select>\n        </div>\n        <div class=\"col-4 text-right\">\n          <label><strong>Show heatmap</strong></label\n          ><br />\n          <div class=\"text-left switch-button switch-button-sm switch-button-success\">\n            <input\n              type=\"checkbox\"\n              id=\"toggleHeatmap\"\n              [checked]=\"showHeatmap\"\n              (click)=\"toggleShowHeatmap()\"\n            /><span> <label for=\"toggleHeatmap\"></label></span>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <div #ref (window:resize)=\"onWindowResize()\" class=\"diagram-container\"></div>\n\n  <div *ngIf=\"processInstanceId\" class=\"p-4 text-center legenda-holder\">\n    <span\n      ><div class=\"legenda highlight-overlay-past\"></div>\n      Executed tasks</span\n    >\n    <span class=\"ml-3\"\n      ><div class=\"legenda highlight-overlay-current\"></div>\n      Current tasks</span\n    >\n  </div>\n\n  <div *ngIf=\"processDefinitionKey\" class=\"p-4 text-center legenda-holder\">\n    <span\n      ><span class=\"badge badge-pill badge-primary\">N</span>&nbsp;&nbsp;Amount of currently active\n      instances of this task.</span\n    >\n    <span\n      >&nbsp;&nbsp;|&nbsp;&nbsp;Red/yellow/green orbs: The amount of times the task is executed in\n      comparison to the other tasks.</span\n    >\n  </div>\n</div>\n",
+                encapsulation: ViewEncapsulation.None,
+                styles: [".process-diagram-container .diagram-container{height:50vh;width:100%}.process-diagram-container .diagram-container-switch-holder{position:absolute;width:100%;z-index:1000}.process-diagram-container .highlight-overlay-past:not(.djs-connection) .djs-visual>:first-child{fill:#d8d8d8!important}.process-diagram-container .highlight-overlay-current:not(.djs-connection) .djs-visual>:first-child{fill:#b2e0ff!important}.process-diagram-container .legenda-holder{font-size:1em}.process-diagram-container .legenda{border:2px solid #000;border-radius:3px;display:inline-block;margin-bottom:-4px;margin-right:5px;padding:7px}.process-diagram-container .legenda.highlight-overlay-past{background-color:#d8d8d8}.process-diagram-container .legenda.highlight-overlay-current{background-color:#b2e0ff}"]
+            },] }
+];
+ProcessDiagramComponent.ctorParameters = () => [
+    { type: ProcessService }
+];
+ProcessDiagramComponent.propDecorators = {
+    el: [{ type: ViewChild, args: ['ref', { static: true },] }],
+    importDone: [{ type: Output }],
+    processDefinitionKey: [{ type: Input }],
+    processInstanceId: [{ type: Input }]
 };
 
-/*
- * Copyright 2015-2020 Ritense BV, the Netherlands.
- *
- * Licensed under EUPL, Version 1.2 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" basis,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-class ProcessModule {
-}
-ProcessModule.decorators = [
-    { type: NgModule, args: [{
-                declarations: [ProcessDiagramComponent],
-                imports: [
-                    CommonModule,
-                    ListModule,
-                    WidgetModule,
-                    TimelineModule,
-                    BpmnJsDiagramModule,
-                    CamundaFormModule,
-                    BrowserAnimationsModule,
-                    ToastrModule.forRoot({
-                        positionClass: 'toast-bottom-full-width',
-                        preventDuplicates: true,
-                    }),
-                ],
-                exports: [ProcessDiagramComponent],
-            },] }
+/*
+ * Copyright 2015-2020 Ritense BV, the Netherlands.
+ *
+ * Licensed under EUPL, Version 1.2 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" basis,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+class ProcessModule {
+}
+ProcessModule.decorators = [
+    { type: NgModule, args: [{
+                declarations: [ProcessDiagramComponent],
+                imports: [
+                    CommonModule,
+                    ListModule,
+                    WidgetModule,
+                    TimelineModule,
+                    BpmnJsDiagramModule,
+                    CamundaFormModule,
+                    BrowserAnimationsModule,
+                    ToastrModule.forRoot({
+                        positionClass: 'toast-bottom-full-width',
+                        preventDuplicates: true,
+                    }),
+                ],
+                exports: [ProcessDiagramComponent],
+            },] }
 ];
 
-/*
- * Copyright 2015-2020 Ritense BV, the Netherlands.
- *
- * Licensed under EUPL, Version 1.2 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" basis,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
+/*
+ * Copyright 2015-2020 Ritense BV, the Netherlands.
+ *
+ * Licensed under EUPL, Version 1.2 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" basis,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
  */
 
-/**
- * Generated bundle index. Do not edit.
+/**
+ * Generated bundle index. Do not edit.
  */
 
 export { ProcessDiagramComponent, ProcessModule, ProcessService };