From afd139cdd7e18aaeee739cbc87da608a606dc074 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jo=C5=BEe=20Fortun?= <joze.fortun@gmail.com>
Date: Fri, 25 Nov 2022 12:14:36 +0100
Subject: [PATCH] Fix legend default position

---
 .../components/Chart/Report/GenericChart.vue   | 18 +++++++++---------
 .../compose/src/views/Admin/Charts/Edit.vue    |  2 +-
 lib/js/src/compose/types/chart/base.ts         | 15 ++++++++++-----
 lib/js/src/compose/types/chart/chart.ts        |  8 ++++----
 locale/en/corteza-webapp-compose/chart.yaml    |  6 +++---
 5 files changed, 27 insertions(+), 22 deletions(-)

diff --git a/client/web/compose/src/components/Chart/Report/GenericChart.vue b/client/web/compose/src/components/Chart/Report/GenericChart.vue
index 7536abc0c..d786f89eb 100644
--- a/client/web/compose/src/components/Chart/Report/GenericChart.vue
+++ b/client/web/compose/src/components/Chart/Report/GenericChart.vue
@@ -228,13 +228,6 @@
                 v-model="report.legend.orientation"
                 :options="orientations"
               />
-              <b-form-checkbox
-                v-model="report.legend.isScrollable"
-                class="mt-2"
-                :disabled="report.legend.orientation !== 'horizontal'"
-              >
-                {{ $t('edit.additionalConfig.legend.scrollable') }}
-              </b-form-checkbox>
             </b-form-group>
             <b-form-group
               horizontal
@@ -245,8 +238,15 @@
               <b-form-select
                 v-model="report.legend.align"
                 :options="alignments"
-                :disabled="report.legend.position.isDefault"
+                :disabled="!report.legend.position.isDefault"
               />
+              <b-form-checkbox
+                v-model="report.legend.isScrollable"
+                class="mt-2"
+                :disabled="report.legend.orientation !== 'horizontal'"
+              >
+                {{ $t('edit.additionalConfig.legend.scrollable') }}
+              </b-form-checkbox>
               <b-form-checkbox
                 v-model="report.legend.position.isDefault"
                 class="mt-2"
@@ -255,7 +255,7 @@
               </b-form-checkbox>
             </b-form-group>
             <template
-              v-if="report.legend.position.isDefault"
+              v-if="!report.legend.position.isDefault"
             >
               <b-form-group
                 horizontal
diff --git a/client/web/compose/src/views/Admin/Charts/Edit.vue b/client/web/compose/src/views/Admin/Charts/Edit.vue
index 5176bfd27..ccb2c7f3a 100644
--- a/client/web/compose/src/views/Admin/Charts/Edit.vue
+++ b/client/web/compose/src/views/Admin/Charts/Edit.vue
@@ -434,6 +434,7 @@ export default {
       deep: true,
       handler (value, oldValue) {
         if (value && oldValue) {
+          console.log(value, oldValue)
           this.onConfigUpdate()
         }
       },
@@ -499,7 +500,6 @@ export default {
       } else {
         this.updateChart(c).then((chart) => {
           this.chart = chartConstructor(chart)
-          this.update()
           this.toastSuccess(this.$t('notification:chart.saved'))
           if (closeOnSuccess) {
             this.redirect()
diff --git a/lib/js/src/compose/types/chart/base.ts b/lib/js/src/compose/types/chart/base.ts
index 1200589f4..85c12cfa6 100644
--- a/lib/js/src/compose/types/chart/base.ts
+++ b/lib/js/src/compose/types/chart/base.ts
@@ -252,7 +252,11 @@ export class BaseChart {
   }
 
   defDimension (): Dimension {
-    return Object.assign({}, { conditions: {}, meta: {} })
+    return Object.assign({}, {
+      conditions: {},
+      meta: {},
+      rotateLabel: '0',
+    })
   }
 
   defMetrics (): Metric {
@@ -269,6 +273,7 @@ export class BaseChart {
         axisType: 'linear',
         axisPosition: 'left',
         labelPosition: 'end',
+        rotateLabel: '0',
       },
       tooltip: {},
       legend: {
@@ -276,10 +281,10 @@ export class BaseChart {
         orientation: 'horizontal',
         align: 'center',
         position: {
-          top: '0',
-          right: '0',
-          bottom: '0',
-          left: '0',
+          top: undefined,
+          right: undefined,
+          bottom: undefined,
+          left: undefined,
           isDefault: true,
         },
       },
diff --git a/lib/js/src/compose/types/chart/chart.ts b/lib/js/src/compose/types/chart/chart.ts
index 3167a92f4..8d61eb054 100644
--- a/lib/js/src/compose/types/chart/chart.ts
+++ b/lib/js/src/compose/types/chart/chart.ts
@@ -278,10 +278,10 @@ export default class Chart extends BaseChart {
       legend: {
         show: !l?.isHidden,
         type: l?.isScrollable ? 'scroll' : 'plain',
-        top: (l?.position?.isDefault ? l?.position?.top : undefined) || undefined,
-        right: (l?.position?.isDefault ? l?.position?.right : undefined) || undefined,
-        bottom: (l?.position?.isDefault ? l?.position?.bottom : undefined) || undefined,
-        left: (l?.position?.isDefault ? l?.position?.left : l?.align || 'center') || 'auto',
+        top: (l?.position?.isDefault ? undefined : l?.position?.top) || undefined,
+        right: (l?.position?.isDefault ? undefined : l?.position?.right) || undefined,
+        bottom: (l?.position?.isDefault ? undefined : l?.position?.bottom) || undefined,
+        left: (l?.position?.isDefault ? l?.align || 'center' : l?.position?.left) || 'auto',
         orient: l?.orientation || 'horizontal'
       },
       ...options,
diff --git a/locale/en/corteza-webapp-compose/chart.yaml b/locale/en/corteza-webapp-compose/chart.yaml
index 8606f360f..bbcb2bc5e 100644
--- a/locale/en/corteza-webapp-compose/chart.yaml
+++ b/locale/en/corteza-webapp-compose/chart.yaml
@@ -136,12 +136,12 @@ edit:
         center: Center
       scrollable: Scrollable
       position:
-        customize: Customize position
+        customize: Default position
         top: Top
         right: Right
         bottom: Bottom
         left: Left
-      valueRange: Values can be set a pixels 20 or as percentages 20%
+      valueRange: Values can be set as pixels 20 or as percentages 20%
     tooltip:
       label: Tooltip
       labelNextToChartPartition: Show labels next to chart partition
@@ -157,7 +157,7 @@ edit:
         right: Right
         bottom: Bottom
         left: Left
-      valueRange: Values can be set a pixels 20 or as percentages 20%
+      valueRange: Values can be set as pixels 20 or as percentages 20%
 import: 'Import chart(s):'
 newLabel: 'Create a new chart:'
 name: Chart name *