PMCORE-3328

resources/assets/js/home/Inbox/Inbox.vue

@@ -366,6 +366,9 @@ export default {
         id: this.id
       });
     });
+    Event.$on('inbox::update-filters', (data) => {
+        that.updateSettings(data);
+    });
   },
   watch: {
     columns: function (val) {
@@ -645,6 +648,7 @@ export default {
      * @param {object} data
      */
     onUpdateFilters(data) {
+      console.log("jonas");
       this.filters = data.params;
       this.prepareAndUpdate(data);
       if (data.refresh) {

resources/assets/js/home/TaskMetrics/VueChartLvOne.vue

@@ -28,9 +28,7 @@
             @select="changeOption"
           ></multiselect>
         </div>
-        <label class="vp-inline-block vp-padding-l20">{{
+        <label class="vp-inline-block vp-padding-l20">{{ $t("ID_TOP") }}</label>
-          $t("ID_TOP")
-        }}</label>
         <div class="vp-inline-block">
           <b-form-checkbox
             v-model="top"
@@ -40,6 +38,35 @@
           >
           </b-form-checkbox>
         </div>
+        <b-popover
+          ref="popover"
+          :target="popoverTarget"
+          variant="secondary"
+          placement="right"
+        >
+          <div class="vp-chart-minipopover">
+            <div class="vp-align-right vp-flex1">
+              <button
+                type="button"
+                class="btn btn-link btn-sm"
+                @click="onClickDrillDown"
+              >
+                <i class="fas fa-chart-line"></i>
+                {{ $t("ID_DRILL") }}
+              </button>
+            </div>
+            <div class="vp-flex1">
+              <button
+                type="button"
+                class="btn btn-link btn-sm"
+                @click="onClickData"
+              >
+                <i class="fas fa-th"></i>
+                {{ $t("ID_DATA") }}
+              </button>
+            </div>
+          </div>
+        </b-popover>
         <div class="vp-inline-block vp-right vp-padding-r40">
           <h4
             class="v-search-title"
@@ -62,10 +89,12 @@
 
 <script>
 import _ from "lodash";
+import jquery from "jquery";
 import Api from "../../api/index";
 import BreadCrumb from "../../components/utils/BreadCrumb.vue";
 import ProcessPopover from "./ProcessPopover.vue";
 import Multiselect from "vue-multiselect";
+import eventBus from "./../EventBus/eventBus";
 
 export default {
   name: "VueChartLvOne",
@@ -79,6 +108,8 @@ export default {
   data() {
     let that = this;
     return {
+      popoverTarget: "",
+      showPopover: false,
       category: null,
       dataProcesses: null, //Data API processes
       settingsBreadcrumbs: [
@@ -108,14 +139,15 @@ export default {
             show: false,
           },
           events: {
-            legendClick: function (chartContext, seriesIndex, config) {
+            click: function (event, chartContext, config) {
-              that.currentSelection = that.totalCases[seriesIndex];
+              that.$refs.popover.$emit("close");
-              that.$emit("updateDataLevel", {
+              if (config.dataPointIndex != -1) {
-                id: that.currentSelection["PRO_ID"],
+                that.currentSelection = that.totalCases[config.dataPointIndex];
-                name: that.currentSelection["PRO_TITLE"],
+                that.onShowDrillDownOptions(
-                level: 1,
+                  event.currentTarget,
-                data: that.currentSelection,
+                  config.dataPointIndex
-              });
+                );
+              }
             },
           },
         },
@@ -126,9 +158,6 @@ export default {
             horizontal: true,
           },
         },
-        legend: {
-          position: "top",
-        },
         colors: ["#33b2df", "#546E7A", "#d4526e", "#13d8aa"],
         dataLabels: {
           enabled: false,
@@ -255,7 +284,7 @@ export default {
           processes: this.selectedProcesses,
           top: this.top,
         };
-        option.id == "all"? delete dt.category:null;
+        option.id == "all" ? delete dt.category : null;
         Api.process
           .totalCasesByProcess(dt)
           .then((response) => {
@@ -345,9 +374,60 @@ export default {
      * Event handler change input search popover
      * @param {string} query - value in popover search input
      */
-    onChangeSearchPopover(query){
+    onChangeSearchPopover(query) {
       this.getProcesses(query);
-    }
+    },
+    /**
+     * Show popover drill down options
+     * @param {objHtml} target
+     * @param {number} index
+     */
+    onShowDrillDownOptions(target, index) {
+      let obj,
+        dt,
+        that = this;
+      if (index != -1) {
+        obj = jquery(target).find("path")[index];
+        dt = this.dataProcesses[index];
+        this.popoverTarget = obj.id;
+        setTimeout(() => {
+          that.$refs.popover.$emit("open");
+        }, 200);
+      }
+    },
+    /**
+     * Show popover drill down options
+     */
+    onClickDrillDown() {
+      this.$emit("updateDataLevel", {
+        id: this.currentSelection["PRO_ID"],
+        name: this.currentSelection["PRO_TITLE"],
+        level: 1,
+        data: this.currentSelection,
+      });
+    },
+    /**
+     * Show popover data options
+     */
+    onClickData() {
+      let taskList = this.data[0].id.toLowerCase(),
+        obj = {
+          autoshow: false,
+          fieldId: "processName",
+          filterVar: "process",
+          label: "",
+          options: {
+            label: this.currentSelection["PRO_TITLE"],
+            value: this.currentSelection["PRO_ID"],
+          },
+          value: this.currentSelection["PRO_ID"],
+        };
+      eventBus.$emit("inbox::update-filters", {
+        params: [obj],
+        refresh: false,
+      });
+      eventBus.$emit("home-update-page", taskList);
+    },
   },
 };
 </script>
@@ -375,5 +455,13 @@ export default {
 .vp-right {
   float: right;
 }
+
+.vp-chart-minipopover {
+  display: flex;
+}
+
+.vp-flex1 {
+  flex: 1;
+}
 </style>
 <style src="vue-multiselect/dist/vue-multiselect.min.css"></style>

workflow/engine/content/translations/english/processmaker.en.po

@@ -53199,6 +53199,12 @@ msgstr "By selecting the task will be open automatically if the task is Inbox or
 msgid "Level"
 msgstr "Level"
 
+# TRANSLATION
+# LABEL/ID_DRILL
+#: LABEL/ID_DRILL
+msgid "Drill"
+msgstr "Drill"
+
 # TRANSLATION
 # LABEL/ID_DRILL_DOWN_NAVIGATOR
 #: LABEL/ID_DRILL_DOWN_NAVIGATOR

workflow/engine/data/mysql/insert.sql

@@ -58006,6 +58006,7 @@ INSERT INTO TRANSLATION (TRN_CATEGORY,TRN_ID,TRN_LANG,TRN_VALUE,TRN_UPDATE_DATE
 ( 'LABEL','ID_DRAFT','en','Draft','2014-01-15') ,
 ( 'LABEL','ID_DRIVE_HELP_ENABLE','en','When this option is enabled, all input, output and attached documents generated in your processes can be stored in Google Drive.','2016-01-05') ,
 ( 'LABEL','ID_DRILL_DOWN_NAVIGATOR','en','Drill Down Navigator','2020-08-26') ,
+( 'LABEL','ID_DRILL','en','Drill','2021-08-26') ,
 ( 'LABEL','ID_DRILL_DOWN_NUMBER_TASKS','en','Number of tasks per Task Status','2020-08-26') ,
 ( 'LABEL','ID_DRILL_DOWN_NUMBER_TASKS_PROCESS','en','Number of Tasks Status per Process','2020-08-26') ,
 ( 'LABEL','ID_DRILL_DOWN_NUMBER_TASKS_PROCESS_BY_TASK','en','Number of Tasks Status per Process by task status','2020-08-26') ,