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

package/bundles/valtimo-analyse.umd.js

@@ -1,383 +1,417 @@
 (function (global, factory) {
-    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/common'), require('@angular/router'), require('@valtimo/security'), require('@valtimo/contract'), require('@valtimo/process'), require('@valtimo/components'), require('bpmn-js/dist/bpmn-navigated-viewer.production.min.js'), require('heatmap.js-fixed/build/heatmap.js')) :
-    typeof define === 'function' && define.amd ? define('@valtimo/analyse', ['exports', '@angular/core', '@angular/common', '@angular/router', '@valtimo/security', '@valtimo/contract', '@valtimo/process', '@valtimo/components', 'bpmn-js/dist/bpmn-navigated-viewer.production.min.js', 'heatmap.js-fixed/build/heatmap.js'], factory) :
-    (global = global || self, factory((global.valtimo = global.valtimo || {}, global.valtimo.analyse = {}), global.ng.core, global.ng.common, global.ng.router, global.security, global.contract, global.process, global.components, global.BpmnJS, global.heatmap));
-}(this, (function (exports, core, common, router, security, contract, process, components, BpmnJS, heatmap) { 'use strict';
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/common'), require('@angular/router'), require('@valtimo/security'), require('@valtimo/config'), require('@valtimo/process'), require('@valtimo/components'), require('bpmn-js/dist/bpmn-navigated-viewer.production.min.js'), require('heatmap.js-fixed/build/heatmap.js')) :
+    typeof define === 'function' && define.amd ? define('@valtimo/analyse', ['exports', '@angular/core', '@angular/common', '@angular/router', '@valtimo/security', '@valtimo/config', '@valtimo/process', '@valtimo/components', 'bpmn-js/dist/bpmn-navigated-viewer.production.min.js', 'heatmap.js-fixed/build/heatmap.js'], factory) :
+    (global = global || self, factory((global.valtimo = global.valtimo || {}, global.valtimo.analyse = {}), global.ng.core, global.ng.common, global.ng.router, global.security, global.config, global.process, global.components, global.BpmnJS, global.heatmap));
+}(this, (function (exports, core, common, router, security, config, process, components, BpmnJS, heatmap) { 'use strict';
 
-    /*
-     * 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.
-     */
-    var AnalyseComponent = /** @class */ (function () {
-        function AnalyseComponent() {
-        }
-        AnalyseComponent.prototype.ngOnInit = function () { };
-        return AnalyseComponent;
-    }());
-    AnalyseComponent.decorators = [
-        { type: core.Component, args: [{
-                    selector: 'valtimo-analyse',
-                    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\n<div class=\"main-content\">\n  <div class=\"container-fluid\">\n    <valtimo-analyse-process-diagram></valtimo-analyse-process-diagram>\n  </div>\n</div>\n",
-                    styles: ["/*!\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 */"]
-                },] }
-    ];
+    /*
+     * 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.
+     */
+    var AnalyseComponent = /** @class */ (function () {
+        function AnalyseComponent() {
+        }
+        AnalyseComponent.prototype.ngOnInit = function () { };
+        return AnalyseComponent;
+    }());
+    AnalyseComponent.decorators = [
+        { type: core.Component, args: [{
+                    selector: 'valtimo-analyse',
+                    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\n<div class=\"main-content\">\n  <div class=\"container-fluid\">\n    <valtimo-analyse-process-diagram></valtimo-analyse-process-diagram>\n  </div>\n</div>\n",
+                    styles: ["/*!\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 */"]
+                },] }
+    ];
     AnalyseComponent.ctorParameters = function () { return []; };
 
-    /*
-     * 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.
-     */
-    var ɵ0 = { title: 'Analysis', roles: [contract.ROLE_USER] };
-    var routes = [
-        {
-            path: 'analysis',
-            component: AnalyseComponent,
-            canActivate: [security.AuthGuardService],
-            data: ɵ0,
-        },
-    ];
-    var AnalyseRoutingModule = /** @class */ (function () {
-        function AnalyseRoutingModule() {
-        }
-        return AnalyseRoutingModule;
-    }());
-    AnalyseRoutingModule.decorators = [
-        { type: core.NgModule, args: [{
-                    declarations: [],
-                    imports: [common.CommonModule, router.RouterModule.forChild(routes)],
-                    exports: [router.RouterModule],
-                },] }
+    /*
+     * 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.
+     */
+    var ɵ0 = { title: 'Analysis', roles: [config.ROLE_USER] };
+    var routes = [
+        {
+            path: 'analysis',
+            component: AnalyseComponent,
+            canActivate: [security.AuthGuardService],
+            data: ɵ0,
+        },
+    ];
+    var AnalyseRoutingModule = /** @class */ (function () {
+        function AnalyseRoutingModule() {
+        }
+        return AnalyseRoutingModule;
+    }());
+    AnalyseRoutingModule.decorators = [
+        { type: core.NgModule, args: [{
+                    declarations: [],
+                    imports: [common.CommonModule, router.RouterModule.forChild(routes)],
+                    exports: [router.RouterModule],
+                },] }
     ];
 
-    /*
-     * 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.
-     */
-    var AnalyseProcessDiagramComponent = /** @class */ (function () {
-        function AnalyseProcessDiagramComponent(processService) {
-            this.processService = processService;
-            this.importDone = new core.EventEmitter();
-            this.enumHeatmapOptions = ['count', 'duration'];
-            this.initialized = false;
-        }
-        AnalyseProcessDiagramComponent.prototype.ngOnInit = function () {
-            var _this = this;
-            this.processService
-                .getProcessDefinitions()
-                .subscribe(function (processDefinitions) {
-                _this.processDefinitions = processDefinitions;
-                if (!_this.processDefinitionKey && processDefinitions.length !== 0) {
-                    _this.processDefinitionKey = processDefinitions[0].key;
-                    _this.loadProcessDefinitionFromKey(_this.processDefinitionKey);
-                }
-            });
-            this.createBpmnViewerInstance();
-        };
-        AnalyseProcessDiagramComponent.prototype.createBpmnViewerInstance = function () {
-            var _this = this;
-            this.bpmnJS = new BpmnJS();
-            this.bpmnJS.on('import.done', function (_a) {
-                var error = _a.error;
-                if (!error && !_this.initialized) {
-                    var canvas_1 = _this.bpmnJS.get('canvas'), eventBus = _this.bpmnJS.get('eventBus');
-                    if (_this.processDiagram.historicActivityInstances) {
-                        _this.processDiagram.historicActivityInstances.forEach(function (instance) {
-                            if (instance.activityType !== 'multiInstanceBody') {
-                                canvas_1.addMarker(instance.activityId, instance.endTime ? 'highlight-overlay-past' : 'highlight-overlay-current');
-                            }
-                        });
-                    }
-                    canvas_1.zoom('fit-viewport', 'auto');
-                    if (_this.processDefinitionVersions) {
-                        eventBus.on('canvas.init', function () {
-                            if (_this.showHeatmap) {
-                                _this.clearHeatmap();
-                            }
-                            _this.loadHeatmapData();
-                        });
-                        eventBus.on('canvas.viewbox.changing', function () {
-                            if (_this.showHeatmap) {
-                                _this.clearHeatmap();
-                            }
-                        });
-                        eventBus.on('canvas.viewbox.changed', function () {
-                            _this.loadHeatmapData();
-                        });
-                    }
-                    _this.initialized = true;
-                }
-                _this.clearHeatmap();
-                if (_this.showHeatmap) {
-                    _this.loadHeatmapData();
-                }
-            });
-        };
-        AnalyseProcessDiagramComponent.prototype.ngOnDestroy = function () {
-            if (this.bpmnJS) {
-                this.bpmnJS.destroy();
-            }
-        };
-        AnalyseProcessDiagramComponent.prototype.loadProcessDefinition = function (processDefinitionKey) {
-            var _this = this;
-            this.processService
-                .getProcessDefinition(processDefinitionKey)
-                .subscribe(function (processDefinition) {
-                _this.heatmapOption = _this.enumHeatmapOptions[0];
-                _this.version = processDefinition.version;
-                _this.loadProcessDefinitionXml(processDefinition.id);
-            });
-        };
-        AnalyseProcessDiagramComponent.prototype.loadProcessDefinitionVersions = function (processDefinitionKey) {
-            var _this = this;
-            this.processService
-                .getProcessDefinitionVersions(processDefinitionKey)
-                .subscribe(function (processDefinitionVersions) {
-                _this.processDefinitionVersions = processDefinitionVersions;
-            });
-        };
-        AnalyseProcessDiagramComponent.prototype.loadProcessDefinitionFromKey = function (processDefinitionKey) {
-            this.loadProcessDefinitionVersions(processDefinitionKey);
-            this.loadProcessDefinition(processDefinitionKey);
-        };
-        AnalyseProcessDiagramComponent.prototype.loadProcessDefinitionXml = function (processDefinitionId) {
-            var _this = this;
-            this.processService.getProcessDefinitionXml(processDefinitionId).subscribe(function (response) {
-                _this.processDiagram = response;
-                _this.bpmnJS.importXML(_this.processDiagram.bpmn20Xml);
-                _this.bpmnJS.attachTo(_this.el.nativeElement);
-            });
-        };
-        AnalyseProcessDiagramComponent.prototype.loadProcessDefinitionHeatmapCount = function (processDefinition) {
-            var _this = this;
-            this.processService.getProcessHeatmapCount(processDefinition).subscribe(function (response) {
-                _this.inputData = response;
-                _this.valueKey = 'totalCount';
-                _this.heatPoints = { data: [] };
-                _this.min = 0;
-                _this.max = 0;
-                Object.keys(_this.inputData).forEach(function (key) {
-                    var 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();
-                }
-            });
-        };
-        AnalyseProcessDiagramComponent.prototype.onWindowResize = function () {
-            var oldCanvas = this.el.nativeElement.querySelector('canvas[class=heatmap-canvas]');
-            if (oldCanvas) {
-                oldCanvas.remove();
-                this.heatMapInstance = null;
-            }
-            if (this.showHeatmap) {
-                this.loadHeatmap();
-            }
-        };
-        AnalyseProcessDiagramComponent.prototype.loadProcessDefinitionHeatmapDuration = function (processDefinition) {
-            var _this = this;
-            this.processService.getProcessHeatmapDuration(processDefinition).subscribe(function (response) {
-                _this.inputData = response;
-                _this.valueKey = 'averageDurationInMilliseconds';
-                _this.heatPoints = { data: [] };
-                _this.min = 0;
-                _this.max = 0;
-                Object.keys(_this.inputData).forEach(function (key) {
-                    var 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();
-                }
-            });
-        };
-        AnalyseProcessDiagramComponent.prototype.setProcessDefinitionKey = function (processDefinitionKey) {
-            this.processDefinitionKey = processDefinitionKey;
-            this.loadProcessDefinitionFromKey(this.processDefinitionKey);
-        };
-        AnalyseProcessDiagramComponent.prototype.setProcessDefinitionVersion = function (version) {
-            this.version = +version;
-            this.loadHeatmapData();
-        };
-        AnalyseProcessDiagramComponent.prototype.setHeatmapOption = function (heatmapOption) {
-            this.heatmapOption = heatmapOption;
-            this.loadHeatmapData();
-        };
-        AnalyseProcessDiagramComponent.prototype.toggleShowHeatmap = function () {
-            this.showHeatmap = !this.showHeatmap;
-            this.loadHeatmapData();
-        };
-        AnalyseProcessDiagramComponent.prototype.loadHeatmap = function () {
-            if (!this.heatMapInstance) {
-                this.heatMapInstance = heatmap.create({
-                    radius: 54,
-                    blur: 0.7,
-                    maxOpacity: 0.4,
-                    minOpacity: 0,
-                    container: this.el.nativeElement,
-                });
-                var heatmapCanvas = this.el.nativeElement.querySelector('canvas[class=heatmap-canvas]');
-                heatmapCanvas.style.zIndex = 1;
-            }
-            this.heatMapInstance.setData({
-                min: this.min,
-                max: this.max,
-                data: this.heatPoints.data,
-            });
-        };
-        AnalyseProcessDiagramComponent.prototype.clearHeatmap = function () {
-            if (this.heatMapInstance) {
-                this.heatMapInstance.setData({ data: [] });
-            }
-        };
-        AnalyseProcessDiagramComponent.prototype.loadHeatmapData = function () {
-            var _this = this;
-            this.processDefinition = this.processDefinitionVersions.find(function (definition) { return definition.version === _this.version; });
-            if (this.heatmapOption === 'count') {
-                this.loadProcessDefinitionHeatmapCount(this.processDefinition);
-            }
-            if (this.heatmapOption === 'duration') {
-                this.loadProcessDefinitionHeatmapDuration(this.processDefinition);
-            }
-        };
-        AnalyseProcessDiagramComponent.prototype.setMax = function (key) {
-            if (this.valueKey === 'averageDurationInMilliseconds') {
-                this.max = Math.max(this.inputData[key].averageDurationInMilliseconds, this.max);
-            }
-            else if (this.valueKey === 'totalCount') {
-                this.max = Math.max(this.inputData[key].totalCount + this.inputData[key].count, this.max);
-            }
-        };
-        AnalyseProcessDiagramComponent.prototype.addCounterActiveOverlays = function (key, inputData) {
-            var 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>",
-            });
-        };
-        return AnalyseProcessDiagramComponent;
-    }());
-    AnalyseProcessDiagramComponent.decorators = [
-        { type: core.Component, args: [{
-                    selector: 'valtimo-analyse-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\n<div class=\"container-fluid\">\n  <div class=\"row p-4 bg-light options\">\n    <div class=\"col-sm-3\">\n      <label><strong>Process</strong></label\n      ><br />\n      <select class=\"form-control\" (change)=\"setProcessDefinitionKey($event.target.value)\">\n        <option\n          *ngFor=\"let processDefinition of processDefinitions\"\n          [value]=\"processDefinition.key\"\n          [selected]=\"processDefinitionKey === processDefinition.key\"\n        >\n          {{ processDefinition.name }}\n        </option>\n      </select>\n    </div>\n    <div class=\"col-sm-1\">\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-sm-3\" *ngIf=\"showHeatmap\">\n      <label><strong>Heatmap type</strong></label\n      ><br />\n      <select class=\"form-control w-sm-50\" (change)=\"setHeatmapOption($event.target.value)\">\n        <option\n          *ngFor=\"let option of enumHeatmapOptions\"\n          [value]=\"option\"\n          [selected]=\"option === heatmapOption\"\n        >\n          {{ option | titlecase }}\n        </option>\n      </select>\n    </div>\n    <div\n      class=\"text-sm-right col-sm-3\"\n      [ngClass]=\"{'offset-sm-2': showHeatmap, 'offset-sm-5': !showHeatmap}\"\n    >\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 class=\"row p-4 bg-white\">\n    <div class=\"col\">\n      <div #ref (window:resize)=\"onWindowResize()\" class=\"diagram-container\"></div>\n    </div>\n  </div>\n</div>\n\n<div 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",
-                    styles: ["/*!\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 */.diagram-container-switch-holder{width:100%;z-index:1000}.diagram-container{height:58vh}.container-fluid{border:1px solid #dee2e6}.options{border-bottom:1px solid #dee2e6}"]
-                },] }
-    ];
-    AnalyseProcessDiagramComponent.ctorParameters = function () { return [
-        { type: process.ProcessService }
-    ]; };
-    AnalyseProcessDiagramComponent.propDecorators = {
-        el: [{ type: core.ViewChild, args: ['ref',] }],
-        importDone: [{ type: core.Output }]
+    /*
+     * 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.
+     */
+    var AnalyseProcessDiagramComponent = /** @class */ (function () {
+        function AnalyseProcessDiagramComponent(processService) {
+            this.processService = processService;
+            this.importDone = new core.EventEmitter();
+            this.enumHeatmapOptions = ['count', 'duration'];
+            this.initialized = false;
+        }
+        AnalyseProcessDiagramComponent.prototype.ngOnInit = function () {
+            var _this = this;
+            this.processService
+                .getProcessDefinitions()
+                .subscribe(function (processDefinitions) {
+                _this.processDefinitions = processDefinitions;
+                if (!_this.processDefinitionKey && processDefinitions.length !== 0) {
+                    _this.processDefinitionKey = processDefinitions[0].key;
+                    _this.loadProcessDefinitionFromKey(_this.processDefinitionKey);
+                }
+            });
+            this.createBpmnViewerInstance();
+        };
+        AnalyseProcessDiagramComponent.prototype.createBpmnViewerInstance = function () {
+            var _this = this;
+            this.bpmnJS = new BpmnJS();
+            this.bpmnJS.on('import.done', function (_a) {
+                var error = _a.error;
+                if (!error && !_this.initialized) {
+                    var canvas_1 = _this.bpmnJS.get('canvas'), eventBus = _this.bpmnJS.get('eventBus');
+                    if (_this.processDiagram.historicActivityInstances) {
+                        _this.processDiagram.historicActivityInstances.forEach(function (instance) {
+                            if (instance.activityType !== 'multiInstanceBody') {
+                                canvas_1.addMarker(instance.activityId, instance.endTime ? 'highlight-overlay-past' : 'highlight-overlay-current');
+                            }
+                        });
+                    }
+                    canvas_1.zoom('fit-viewport', 'auto');
+                    if (_this.processDefinitionVersions) {
+                        eventBus.on('canvas.init', function () {
+                            if (_this.showHeatmap) {
+                                _this.clearHeatmap();
+                            }
+                            _this.loadHeatmapData();
+                        });
+                        eventBus.on('canvas.viewbox.changing', function () {
+                            if (_this.showHeatmap) {
+                                _this.clearHeatmap();
+                            }
+                        });
+                        eventBus.on('canvas.viewbox.changed', function () {
+                            _this.loadHeatmapData();
+                        });
+                    }
+                    _this.initialized = true;
+                }
+                _this.clearHeatmap();
+                if (_this.showHeatmap) {
+                    _this.loadHeatmapData();
+                }
+            });
+        };
+        AnalyseProcessDiagramComponent.prototype.ngOnDestroy = function () {
+            if (this.bpmnJS) {
+                this.bpmnJS.destroy();
+            }
+        };
+        AnalyseProcessDiagramComponent.prototype.loadProcessDefinition = function (processDefinitionKey) {
+            var _this = this;
+            this.processService
+                .getProcessDefinition(processDefinitionKey)
+                .subscribe(function (processDefinition) {
+                _this.heatmapOption = _this.enumHeatmapOptions[0];
+                _this.version = processDefinition.version;
+                _this.loadProcessDefinitionXml(processDefinition.id);
+            });
+        };
+        AnalyseProcessDiagramComponent.prototype.loadProcessDefinitionVersions = function (processDefinitionKey) {
+            var _this = this;
+            this.processService
+                .getProcessDefinitionVersions(processDefinitionKey)
+                .subscribe(function (processDefinitionVersions) {
+                _this.processDefinitionVersions = processDefinitionVersions;
+            });
+        };
+        AnalyseProcessDiagramComponent.prototype.loadProcessDefinitionFromKey = function (processDefinitionKey) {
+            this.loadProcessDefinitionVersions(processDefinitionKey);
+            this.loadProcessDefinition(processDefinitionKey);
+        };
+        AnalyseProcessDiagramComponent.prototype.loadProcessDefinitionXml = function (processDefinitionId) {
+            var _this = this;
+            this.processService.getProcessDefinitionXml(processDefinitionId).subscribe(function (response) {
+                _this.processDiagram = response;
+                _this.bpmnJS.importXML(_this.processDiagram.bpmn20Xml);
+                _this.bpmnJS.attachTo(_this.el.nativeElement);
+            });
+        };
+        AnalyseProcessDiagramComponent.prototype.loadProcessDefinitionHeatmapCount = function (processDefinition) {
+            var _this = this;
+            this.processService.getProcessHeatmapCount(processDefinition).subscribe(function (response) {
+                _this.inputData = response;
+                _this.valueKey = 'totalCount';
+                _this.heatPoints = { data: [] };
+                _this.min = 0;
+                _this.max = 0;
+                Object.keys(_this.inputData).forEach(function (key) {
+                    var 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();
+                }
+            });
+        };
+        AnalyseProcessDiagramComponent.prototype.onWindowResize = function () {
+            var oldCanvas = this.el.nativeElement.querySelector('canvas[class=heatmap-canvas]');
+            if (oldCanvas) {
+                oldCanvas.remove();
+                this.heatMapInstance = null;
+            }
+            if (this.showHeatmap) {
+                this.loadHeatmap();
+            }
+        };
+        AnalyseProcessDiagramComponent.prototype.loadProcessDefinitionHeatmapDuration = function (processDefinition) {
+            var _this = this;
+            this.processService.getProcessHeatmapDuration(processDefinition).subscribe(function (response) {
+                _this.inputData = response;
+                _this.valueKey = 'averageDurationInMilliseconds';
+                _this.heatPoints = { data: [] };
+                _this.min = 0;
+                _this.max = 0;
+                Object.keys(_this.inputData).forEach(function (key) {
+                    var 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();
+                }
+            });
+        };
+        AnalyseProcessDiagramComponent.prototype.setProcessDefinitionKey = function (processDefinitionKey) {
+            this.processDefinitionKey = processDefinitionKey;
+            this.loadProcessDefinitionFromKey(this.processDefinitionKey);
+        };
+        AnalyseProcessDiagramComponent.prototype.setProcessDefinitionVersion = function (version) {
+            this.version = +version;
+            this.loadHeatmapData();
+        };
+        AnalyseProcessDiagramComponent.prototype.setHeatmapOption = function (heatmapOption) {
+            this.heatmapOption = heatmapOption;
+            this.loadHeatmapData();
+        };
+        AnalyseProcessDiagramComponent.prototype.toggleShowHeatmap = function () {
+            this.showHeatmap = !this.showHeatmap;
+            this.loadHeatmapData();
+        };
+        AnalyseProcessDiagramComponent.prototype.loadHeatmap = function () {
+            if (!this.heatMapInstance) {
+                this.heatMapInstance = heatmap.create({
+                    radius: 54,
+                    blur: 0.7,
+                    maxOpacity: 0.4,
+                    minOpacity: 0,
+                    container: this.el.nativeElement,
+                });
+                var heatmapCanvas = this.el.nativeElement.querySelector('canvas[class=heatmap-canvas]');
+                heatmapCanvas.style.zIndex = 1;
+            }
+            this.heatMapInstance.setData({
+                min: this.min,
+                max: this.max,
+                data: this.heatPoints.data,
+            });
+        };
+        AnalyseProcessDiagramComponent.prototype.clearHeatmap = function () {
+            if (this.heatMapInstance) {
+                this.heatMapInstance.setData({ data: [] });
+            }
+        };
+        AnalyseProcessDiagramComponent.prototype.loadHeatmapData = function () {
+            var _this = this;
+            this.processDefinition = this.processDefinitionVersions.find(function (definition) { return definition.version === _this.version; });
+            if (this.heatmapOption === 'count') {
+                this.loadProcessDefinitionHeatmapCount(this.processDefinition);
+            }
+            if (this.heatmapOption === 'duration') {
+                this.loadProcessDefinitionHeatmapDuration(this.processDefinition);
+            }
+        };
+        AnalyseProcessDiagramComponent.prototype.setMax = function (key) {
+            if (this.valueKey === 'averageDurationInMilliseconds') {
+                this.max = Math.max(this.inputData[key].averageDurationInMilliseconds, this.max);
+            }
+            else if (this.valueKey === 'totalCount') {
+                this.max = Math.max(this.inputData[key].totalCount + this.inputData[key].count, this.max);
+            }
+        };
+        AnalyseProcessDiagramComponent.prototype.addCounterActiveOverlays = function (key, inputData) {
+            var 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>",
+            });
+        };
+        return AnalyseProcessDiagramComponent;
+    }());
+    AnalyseProcessDiagramComponent.decorators = [
+        { type: core.Component, args: [{
+                    selector: 'valtimo-analyse-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\n<div class=\"container-fluid\">\n  <div class=\"row p-4 bg-light options\">\n    <div class=\"col-sm-3\">\n      <label><strong>Process</strong></label\n      ><br />\n      <select class=\"form-control\" (change)=\"setProcessDefinitionKey($event.target.value)\">\n        <option\n          *ngFor=\"let processDefinition of processDefinitions\"\n          [value]=\"processDefinition.key\"\n          [selected]=\"processDefinitionKey === processDefinition.key\"\n        >\n          {{ processDefinition.name }}\n        </option>\n      </select>\n    </div>\n    <div class=\"col-sm-1\">\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-sm-3\" *ngIf=\"showHeatmap\">\n      <label><strong>Heatmap type</strong></label\n      ><br />\n      <select class=\"form-control w-sm-50\" (change)=\"setHeatmapOption($event.target.value)\">\n        <option\n          *ngFor=\"let option of enumHeatmapOptions\"\n          [value]=\"option\"\n          [selected]=\"option === heatmapOption\"\n        >\n          {{ option | titlecase }}\n        </option>\n      </select>\n    </div>\n    <div\n      class=\"text-sm-right col-sm-3\"\n      [ngClass]=\"{'offset-sm-2': showHeatmap, 'offset-sm-5': !showHeatmap}\"\n    >\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 class=\"row p-4 bg-white\">\n    <div class=\"col\">\n      <div #ref (window:resize)=\"onWindowResize()\" class=\"diagram-container\"></div>\n    </div>\n  </div>\n</div>\n\n<div 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",
+                    styles: ["/*!\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 */.diagram-container-switch-holder{width:100%;z-index:1000}.diagram-container{height:58vh}.container-fluid{border:1px solid #dee2e6}.options{border-bottom:1px solid #dee2e6}"]
+                },] }
+    ];
+    AnalyseProcessDiagramComponent.ctorParameters = function () { return [
+        { type: process.ProcessService }
+    ]; };
+    AnalyseProcessDiagramComponent.propDecorators = {
+        el: [{ type: core.ViewChild, args: ['ref',] }],
+        importDone: [{ type: core.Output }]
     };
 
-    /*
-     * 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.
-     */
-    var AnalyseModule = /** @class */ (function () {
-        function AnalyseModule() {
-        }
-        return AnalyseModule;
-    }());
-    AnalyseModule.decorators = [
-        { type: core.NgModule, args: [{
-                    declarations: [AnalyseComponent, AnalyseProcessDiagramComponent],
-                    imports: [common.CommonModule, AnalyseRoutingModule, process.ProcessModule, components.WidgetModule],
-                    exports: [AnalyseComponent],
-                },] }
+    /*
+     * 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.
+     */
+    var AnalyseModule = /** @class */ (function () {
+        function AnalyseModule() {
+        }
+        return AnalyseModule;
+    }());
+    AnalyseModule.decorators = [
+        { type: core.NgModule, args: [{
+                    declarations: [AnalyseComponent, AnalyseProcessDiagramComponent],
+                    imports: [common.CommonModule, AnalyseRoutingModule, process.ProcessModule, components.WidgetModule],
+                    exports: [AnalyseComponent],
+                },] }
     ];
 
-    /*
-     * 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.
+     *
+     */
+
+    /*
+     * 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.
      */
 
     exports.AnalyseComponent = AnalyseComponent;