Fix drilldown of select, record and user fields

client/web/compose/src/components/Chart/index.vue

@@ -11,7 +11,7 @@
       v-if="renderer"
       :chart="renderer"
       class="flex-fill p-1"
-      v-on="$listeners"
+      @click="drillDown"
     />
   </div>
 </template>
@@ -52,6 +52,8 @@ export default {
     return {
       processing: false,
 
+      valueMap: new Map(),
+
       renderer: undefined,
     }
   },
@@ -117,7 +119,10 @@ export default {
             if (meta.fields && field.kind === 'Select') {
               data.labels = data.labels.map(value => {
                 const { text } = field.options.options.find(o => o.value === value) || {}
-                return text || value
+                const label = text || value
+                this.valueMap[label] = value
+
+                return label
               })
             }
           }
@@ -126,8 +131,10 @@ export default {
             if (field.kind === 'User') {
               // Fetch and map users to labels
               await this.resolveUsers(data.labels)
-              data.labels = data.labels.map(label => {
-                return field.formatter(this.getUserByID(label)) || label
+              data.labels = data.labels.map(userID => {
+                const label = field.formatter(this.getUserByID(userID)) || userID
+                this.valueMap[label] = userID
+                return label
               })
             } else {
               // Fetch and map records and their values to labels
@@ -160,7 +167,10 @@ export default {
                 })).then(records => {
                   data.labels = records.map(record => {
                     const value = field.options.labelField ? record.values[field.options.labelField] : record.recordID
-                    return Array.isArray(value) ? value.join(', ') : value
+                    const label = Array.isArray(value) ? value.join(', ') : value
+                    this.valueMap[label] = record.recordID
+
+                    return value
                   })
                 })
               }
@@ -183,6 +193,12 @@ export default {
       this.$emit('updated')
     },
 
+    drillDown (e) {
+      e.trueName = this.valueMap[e.name] || e.name
+
+      return this.$emit('drill-down', e)
+    },
+
     getThemeVariables () {
       const getCssVariable = (variableName) => {
         return getComputedStyle(document.documentElement).getPropertyValue(variableName).trim()
@@ -217,6 +233,7 @@ export default {
     setDefaultValues () {
       this.processing = false
       this.renderer = undefined
+      this.valueMap = {}
     },
 
     destroyEvents () {

client/web/compose/src/components/PageBlocks/ChartBase.vue

@@ -10,7 +10,7 @@
       :chart="chart"
       :record="record"
       :reporter="reporter"
-      @click="drillDown"
+      @drill-down="drillDown"
     />
   </wrap>
 </template>
@@ -136,11 +136,10 @@ export default {
 
     /**
      *
-     * @param {*} name
      * Based on drill down configuration, either changes the linked block on the page
      * or opens it in a modal wit the filter and dimensions from the chart and the clicked value
      */
-    drillDown ({ name, value }) {
+    drillDown ({ trueName, value }) {
       const { chartID, drillDown } = this.options
 
       if (!drillDown.enabled) {
@@ -150,9 +149,9 @@ export default {
       const report = this.chart.config.reports[0] || {}
       const { yAxis = {} } = report
 
-      // If name exists we use it as value, otherwise we need to look at the actual value based on if it is horizontal or vertical
-      let drillDownValue = name
-      if (!name) {
+      // If trueName exists we use it as value, otherwise we need to look at the actual value based on if it is horizontal or vertical
+      let drillDownValue = trueName
+      if (!trueName) {
         drillDownValue = yAxis.horizontal ? value[1] : value[0]
       }
 
@@ -163,7 +162,6 @@ export default {
       const dimensionFilter = dimensions ? `(${dimensions} = '${drillDownValue}')` : ''
       filter = filter ? `(${filter})` : ''
       const prefilter = [dimensionFilter, filter].filter(f => f).join(' AND ')
-
       if (drillDown.blockID) {
         // Use linked record list to display drill down data
         const { pageID = NoID } = this.page