From aa5027811fe239550e702e88f7764f909b53e1bd Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jo=C5=BEe=20Fortun?= <joze.fortun@gmail.com>
Date: Tue, 18 Apr 2023 13:22:36 +0200
Subject: [PATCH] Fix chart labels when switching from relative chart type

---
 .../components/Chart/Report/GenericChart.vue  | 82 ++++++++++---------
 .../components/Chart/Report/ReportEdit.vue    |  1 -
 lib/js/src/compose/types/chart/chart.ts       |  5 ++
 3 files changed, 48 insertions(+), 40 deletions(-)

diff --git a/client/web/compose/src/components/Chart/Report/GenericChart.vue b/client/web/compose/src/components/Chart/Report/GenericChart.vue
index 405e6da93..2c725f2a5 100644
--- a/client/web/compose/src/components/Chart/Report/GenericChart.vue
+++ b/client/web/compose/src/components/Chart/Report/GenericChart.vue
@@ -199,6 +199,7 @@
             <b-form-select
               v-model="metric.type"
               :options="chartTypes"
+              @input="chartTypeChanged(metric)"
             >
               <template slot="first">
                 <option
@@ -311,48 +312,47 @@
     </template>
 
     <template #additional-config="{ hasAxis, report }">
-      <template v-if="!hasAxis">
-        <hr>
-        <div class="px-3">
-          <h5 class="mb-3">
-            {{ $t('edit.additionalConfig.tooltip.label') }}
-          </h5>
+      <hr>
+      <div class="px-3">
+        <h5 class="mb-3">
+          {{ $t('edit.additionalConfig.tooltip.label') }}
+        </h5>
 
-          <b-row>
-            <b-col
-              cols="12"
-              md="6"
+        <b-row>
+          <b-col
+            cols="12"
+            md="6"
+          >
+            <b-form-group
+              :label="$t('edit.additionalConfig.tooltip.formatting.label')"
+              :description="$t('edit.additionalConfig.tooltip.formatting.description')"
+              label-class="text-primary"
             >
-              <b-form-group
-                :label="$t('edit.additionalConfig.tooltip.formatting.label')"
-                :description="$t('edit.additionalConfig.tooltip.formatting.description')"
-                label-class="text-primary"
-              >
-                <b-input
-                  v-model="report.tooltip.formatting"
-                  :placeholder="$t('edit.additionalConfig.tooltip.formatting.placeholder')"
-                />
-              </b-form-group>
-            </b-col>
-            <b-col
-              cols="12"
-              md="6"
+              <b-input
+                v-model="report.tooltip.formatting"
+                :placeholder="$t('edit.additionalConfig.tooltip.formatting.placeholder')"
+              />
+            </b-form-group>
+          </b-col>
+          <b-col
+            v-if="!hasAxis"
+            cols="12"
+            md="6"
+          >
+            <b-form-group
+              :label="$t('edit.additionalConfig.tooltip.labelNextToChart')"
+              label-class="text-primary"
             >
-              <b-form-group
-                :label="$t('edit.additionalConfig.tooltip.labelNextToChart')"
-                label-class="text-primary"
-              >
-                <c-input-checkbox
-                  :value="!!report.tooltip.labelsNextToPartition"
-                  switch
-                  :labels="checkboxLabel"
-                  @input="$set(report.tooltip, 'labelsNextToPartition', $event)"
-                />
-              </b-form-group>
-            </b-col>
-          </b-row>
-        </div>
-      </template>
+              <c-input-checkbox
+                :value="!!report.tooltip.labelsNextToPartition"
+                switch
+                :labels="checkboxLabel"
+                @input="$set(report.tooltip, 'labelsNextToPartition', $event)"
+              />
+            </b-form-group>
+          </b-col>
+        </b-row>
+      </div>
 
       <hr>
       <div class="px-3 mb-2">
@@ -532,6 +532,10 @@ export default {
       this.$set(metric, 'smooth', style === 'smooth')
       this.$set(metric, 'step', style === 'step')
     },
+
+    chartTypeChanged (metric) {
+      metric.relativeValue = false
+    },
   },
 }
 </script>
diff --git a/client/web/compose/src/components/Chart/Report/ReportEdit.vue b/client/web/compose/src/components/Chart/Report/ReportEdit.vue
index 4aeb55d9c..5701de892 100644
--- a/client/web/compose/src/components/Chart/Report/ReportEdit.vue
+++ b/client/web/compose/src/components/Chart/Report/ReportEdit.vue
@@ -322,7 +322,6 @@
         name="y-axis"
         :report="editReport"
       />
-      <hr>
     </template>
 
     <hr v-if="hasLegend">
diff --git a/lib/js/src/compose/types/chart/chart.ts b/lib/js/src/compose/types/chart/chart.ts
index 0ba3c01bf..67739273a 100644
--- a/lib/js/src/compose/types/chart/chart.ts
+++ b/lib/js/src/compose/types/chart/chart.ts
@@ -242,6 +242,11 @@ export default class Chart extends BaseChart {
             opacity: fill ? 0.7 : 0,
           },
           symbol,
+          symbolSize: 16,
+          tooltip: {
+            trigger: 'axis',
+            formatter: tooltipFormatter,
+          },
           label: {
             show: fixed,
             position: 'inside',