From 6e7c3196a27987e75c2c4592e2632487ae5a3911 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jo=C5=BEe=20Fortun?= <joze.fortun@gmail.com>
Date: Tue, 12 Dec 2023 16:00:07 +0100
Subject: [PATCH] Fix drill down with time chart labels

---
 .../src/components/Chart/Report/ReportEdit.vue    |  8 ++++++++
 client/web/compose/src/components/Chart/index.vue |  2 +-
 .../src/components/PageBlocks/ChartBase.vue       | 15 ++++++++++++---
 3 files changed, 21 insertions(+), 4 deletions(-)

diff --git a/client/web/compose/src/components/Chart/Report/ReportEdit.vue b/client/web/compose/src/components/Chart/Report/ReportEdit.vue
index a9dde6abd..5848d9d8d 100644
--- a/client/web/compose/src/components/Chart/Report/ReportEdit.vue
+++ b/client/web/compose/src/components/Chart/Report/ReportEdit.vue
@@ -138,6 +138,7 @@
                   v-model="d.modifier"
                   :disabled="!d.field || !isTemporalField(d.field)"
                   :options="dimensionModifiers"
+                  @change="onDimModifierChange($event, d)"
                 >
                   <template slot="first">
                     <option
@@ -661,11 +662,18 @@ export default {
     onDimFieldChange (f, d) {
       if (!this.isTemporalField(f)) {
         this.$set(d, 'modifier', this.dimensionModifiers[0].value)
+        this.$set(d, 'timeLabels', false)
       }
 
       this.$set(d.meta, 'fields', [])
     },
 
+    onDimModifierChange (modifier, d) {
+      if (['WEEK', 'QUARTER'].includes(modifier)) {
+        this.$set(d, 'timeLabels', false)
+      }
+    },
+
     onMetricFieldChange (field, m) {
       if (field === 'count') {
         this.$set(m, 'aggregate', undefined)
diff --git a/client/web/compose/src/components/Chart/index.vue b/client/web/compose/src/components/Chart/index.vue
index 37bc68a86..3b49cf08a 100644
--- a/client/web/compose/src/components/Chart/index.vue
+++ b/client/web/compose/src/components/Chart/index.vue
@@ -203,7 +203,7 @@ export default {
 
     setDefaultValues () {
       this.processing = false
-      this.rendeder = undefined
+      this.renderer = undefined
     },
 
     destroyEvents () {
diff --git a/client/web/compose/src/components/PageBlocks/ChartBase.vue b/client/web/compose/src/components/PageBlocks/ChartBase.vue
index 29c60c756..dccbd113d 100644
--- a/client/web/compose/src/components/PageBlocks/ChartBase.vue
+++ b/client/web/compose/src/components/PageBlocks/ChartBase.vue
@@ -128,18 +128,27 @@ export default {
      * 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 }) {
+    drillDown ({ name, value }) {
       const { chartID, drillDown } = this.options
 
       if (!drillDown.enabled) {
         return
       }
 
+      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) {
+        drillDownValue = yAxis.horizontal ? value[1] : value[0]
+      }
+
       // Get recordListID that is linked
       let { moduleID, dimensions, filter } = this.filter
 
       // Construct filter
-      const dimensionFilter = dimensions ? `(${dimensions} = '${name}')` : ''
+      const dimensionFilter = dimensions ? `(${dimensions} = '${drillDownValue}')` : ''
       filter = filter ? `(${filter})` : ''
       const prefilter = [dimensionFilter, filter].filter(f => f).join(' AND ')
 
@@ -156,7 +165,7 @@ export default {
 
         // Open in modal
         const block = new compose.PageBlockRecordList({
-          title: title ? `${title} - "${name}"` : name,
+          title: title ? `${title} - "${drillDownValue}"` : drillDownValue,
           blockID: `drillDown-${chartID}`,
           options: {
             moduleID,