From 6a1931cf016d13d0b306f49dd9e0565dd7d4442d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jo=C5=BEe=20Fortun?= <joze.fortun@gmail.com>
Date: Thu, 24 Nov 2022 18:33:23 +0100
Subject: [PATCH] Adjust chart configurations and builder

---
 .../components/Chart/Report/GenericChart.vue  | 82 ++++++++++---------
 .../components/Chart/Report/ReportEdit.vue    | 18 ++--
 .../compose/src/views/Admin/Charts/Edit.vue   | 12 ++-
 lib/js/src/compose/types/chart/base.ts        |  2 +
 lib/js/src/compose/types/chart/chart.ts       |  8 +-
 lib/js/src/compose/types/chart/util.ts        |  4 +-
 locale/en/corteza-webapp-compose/chart.yaml   |  6 +-
 7 files changed, 77 insertions(+), 55 deletions(-)

diff --git a/client/web/compose/src/components/Chart/Report/GenericChart.vue b/client/web/compose/src/components/Chart/Report/GenericChart.vue
index f27d6ca94..7536abc0c 100644
--- a/client/web/compose/src/components/Chart/Report/GenericChart.vue
+++ b/client/web/compose/src/components/Chart/Report/GenericChart.vue
@@ -7,9 +7,6 @@
       <h4 class="mb-0">
         {{ $t('edit.yAxis.label') }}
       </h4>
-      <small class="text-muted mb-3">
-        {{ $t('edit.yAxis.valueAppliedTo') }}
-      </small>
 
       <b-form-group
         horizontal
@@ -84,7 +81,6 @@
         <b-input
           v-model="report.yAxis.rotateLabel"
           type="number"
-          placeholder="0"
         />
       </b-form-group>
 
@@ -203,7 +199,7 @@
       </b-form-group>
     </template>
 
-    <template #additional-config="{ report }">
+    <template #additional-config="{ hasAxis, report }">
       <hr>
       <template>
         <h4 class="mb-3">
@@ -223,32 +219,43 @@
           <template v-if="!report.legend.isHidden">
             <b-form-group
               horizontal
-              class="mt-2 mb-1"
+              class="mt-2"
               breakpoint="md"
               :label-cols="3"
               :label="$t('edit.additionalConfig.legend.orientation.label')"
-              :disabled="report.legend.isHidden"
             >
               <b-form-select
                 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-checkbox
-              v-model="report.legend.isScrollable"
-              class="mb-1"
-              :disabled="report.legend.orientation !== 'horizontal'"
+            <b-form-group
+              horizontal
+              breakpoint="md"
+              :label-cols="3"
+              :label="$t('edit.additionalConfig.legend.align.label')"
             >
-              {{ $t('edit.additionalConfig.legend.scrollable') }}
-            </b-form-checkbox>
-            <b-form-checkbox
-              v-model="report.legend.isCustomized"
-              class="mb-3"
-            >
-              {{ $t('edit.additionalConfig.legend.position.customize') }}
-            </b-form-checkbox>
+              <b-form-select
+                v-model="report.legend.align"
+                :options="alignments"
+                :disabled="report.legend.position.isDefault"
+              />
+              <b-form-checkbox
+                v-model="report.legend.position.isDefault"
+                class="mt-2"
+              >
+                {{ $t('edit.additionalConfig.legend.position.customize') }}
+              </b-form-checkbox>
+            </b-form-group>
             <template
-              v-if="report.legend.isCustomized"
+              v-if="report.legend.position.isDefault"
             >
               <b-form-group
                 horizontal
@@ -259,7 +266,6 @@
               >
                 <b-input
                   v-model="report.legend.position.top"
-                  placeholder="0"
                 />
               </b-form-group>
               <b-form-group
@@ -271,7 +277,6 @@
               >
                 <b-input
                   v-model="report.legend.position.right"
-                  placeholder="0"
                 />
               </b-form-group>
               <b-form-group
@@ -283,7 +288,6 @@
               >
                 <b-input
                   v-model="report.legend.position.bottom"
-                  placeholder="0"
                 />
               </b-form-group>
               <b-form-group
@@ -296,15 +300,15 @@
               >
                 <b-input
                   v-model="report.legend.position.left"
-                  placeholder="0"
                 />
               </b-form-group>
             </template>
           </template>
         </b-form-group>
       </template>
-      <hr>
-      <template>
+
+      <template v-if="!hasAxis">
+        <hr>
         <h4 class="mb-3">
           {{ $t('edit.additionalConfig.tooltip.label') }}
         </h4>
@@ -359,7 +363,6 @@
           >
             <b-input
               v-model="report.offset.top"
-              placeholder="0"
             />
           </b-form-group>
           <b-form-group
@@ -371,7 +374,6 @@
           >
             <b-input
               v-model="report.offset.right"
-              placeholder="0"
             />
           </b-form-group>
           <b-form-group
@@ -383,7 +385,6 @@
           >
             <b-input
               v-model="report.offset.bottom"
-              placeholder="0"
             />
           </b-form-group>
           <b-form-group
@@ -396,7 +397,6 @@
           >
             <b-input
               v-model="report.offset.left"
-              placeholder="0"
             />
           </b-form-group>
         </b-form-group>
@@ -454,23 +454,27 @@ export default {
         { value: 'start', text: this.$t('edit.yAxis.labelPosition.bottom') },
       ],
 
+      tensionSteps: [
+        { text: this.$t('edit.metric.lineTension.straight'), value: 0.0 },
+        { text: this.$t('edit.metric.lineTension.slight'), value: 0.2 },
+        { text: this.$t('edit.metric.lineTension.medium'), value: 0.4 },
+        { text: this.$t('edit.metric.lineTension.curvy'), value: 0.6 },
+      ],
+
       orientations: [
         { value: 'horizontal', text: this.$t('edit.additionalConfig.legend.orientation.horizontal') },
         { value: 'vertical', text: this.$t('edit.additionalConfig.legend.orientation.vertical') },
       ],
+
+      alignments: [
+        { value: 'left', text: this.$t('edit.additionalConfig.legend.align.left') },
+        { value: 'center', text: this.$t('edit.additionalConfig.legend.align.center') },
+        { value: 'right', text: this.$t('edit.additionalConfig.legend.align.right') },
+      ],
     }
   },
 
   computed: {
-    tensionSteps () {
-      return [
-        { text: this.$t('edit.metric.lineTension.straight'), value: 0.0 },
-        { text: this.$t('edit.metric.lineTension.slight'), value: 0.2 },
-        { text: this.$t('edit.metric.lineTension.medium'), value: 0.4 },
-        { text: this.$t('edit.metric.lineTension.curvy'), value: 0.6 },
-      ]
-    },
-
     isNew () {
       return this.chart.chartID === NoID
     },
diff --git a/client/web/compose/src/components/Chart/Report/ReportEdit.vue b/client/web/compose/src/components/Chart/Report/ReportEdit.vue
index 7a1c15292..0fed65a7e 100644
--- a/client/web/compose/src/components/Chart/Report/ReportEdit.vue
+++ b/client/web/compose/src/components/Chart/Report/ReportEdit.vue
@@ -147,7 +147,6 @@
               <b-input
                 v-model="d.rotateLabel"
                 type="number"
-                placeholder="0"
               />
             </b-form-group>
           </template>
@@ -255,17 +254,20 @@
       </draggable>
     </div>
 
-    <hr>
+    <template v-if="hasAxis">
+      <hr>
 
-    <slot
-      name="y-axis"
-      :report="editReport"
-    />
+      <slot
+        name="y-axis"
+        :report="editReport"
+      />
+    </template>
 
     <slot
       name="additional-config"
       :report="editReport"
       :metrics="metrics"
+      :has-axis="hasAxis"
     />
   </div>
 </template>
@@ -343,6 +345,10 @@ export default {
       ]
     },
 
+    hasAxis () {
+      return this.metrics.some(({ type }) => ['bar', 'line'].includes(type))
+    },
+
     dimensionFields () {
       return [
         ...[...this.module.fields].sort((a, b) => a.label.localeCompare(b.text)),
diff --git a/client/web/compose/src/views/Admin/Charts/Edit.vue b/client/web/compose/src/views/Admin/Charts/Edit.vue
index cccc7c21f..5176bfd27 100644
--- a/client/web/compose/src/views/Admin/Charts/Edit.vue
+++ b/client/web/compose/src/views/Admin/Charts/Edit.vue
@@ -432,10 +432,10 @@ export default {
 
     'chart.config': {
       deep: true,
-      handler () {
-        debounce(function () {
-          this.update()
-        }, 500)
+      handler (value, oldValue) {
+        if (value && oldValue) {
+          this.onConfigUpdate()
+        }
       },
     },
   },
@@ -470,6 +470,10 @@ export default {
       this.$refs.chart.updateChart()
     },
 
+    onConfigUpdate: debounce(function () {
+      this.update()
+    }, 300),
+
     onUpdated () {
       this.processing = false
     },
diff --git a/lib/js/src/compose/types/chart/base.ts b/lib/js/src/compose/types/chart/base.ts
index d49ff9f54..1200589f4 100644
--- a/lib/js/src/compose/types/chart/base.ts
+++ b/lib/js/src/compose/types/chart/base.ts
@@ -274,11 +274,13 @@ export class BaseChart {
       legend: {
         isScrollable: true,
         orientation: 'horizontal',
+        align: 'center',
         position: {
           top: '0',
           right: '0',
           bottom: '0',
           left: '0',
+          isDefault: true,
         },
       },
       offset: {
diff --git a/lib/js/src/compose/types/chart/chart.ts b/lib/js/src/compose/types/chart/chart.ts
index f5d6cd1d6..3167a92f4 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?.isCustomized ? l?.position?.top : undefined,
-        right: l?.isCustomized ? l?.position?.right : undefined,
-        bottom: l?.isCustomized ? l?.position?.bottom : undefined,
-        left: l?.isCustomized ? l?.position?.left : 'center',
+        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',
         orient: l?.orientation || 'horizontal'
       },
       ...options,
diff --git a/lib/js/src/compose/types/chart/util.ts b/lib/js/src/compose/types/chart/util.ts
index bd57432eb..da7a9263c 100644
--- a/lib/js/src/compose/types/chart/util.ts
+++ b/lib/js/src/compose/types/chart/util.ts
@@ -68,6 +68,7 @@ export interface ChartOffset {
 }
 
 export interface Position {
+  isDefault?: boolean;
   top?: string;
   right?: string;
   bottom?: string;
@@ -77,8 +78,9 @@ export interface Position {
 export interface Legend {
   isHidden?: boolean;
   orientation?: string;
+  align?: string;
   isScrollable?: boolean;
-  isCustomized?: boolean;
+  isDefault?: boolean;
   position?: Position;
 }
 
diff --git a/locale/en/corteza-webapp-compose/chart.yaml b/locale/en/corteza-webapp-compose/chart.yaml
index aa225d476..8606f360f 100644
--- a/locale/en/corteza-webapp-compose/chart.yaml
+++ b/locale/en/corteza-webapp-compose/chart.yaml
@@ -110,7 +110,6 @@ edit:
     rotate:
       label: Rotate labels
       description: Labels can be rotated from -90 to 90 degrees
-    valueAppliedTo: Applied to bar and line charts
     labelLabel: Axis label
     labelPosition:
       label: Label position
@@ -130,6 +129,11 @@ edit:
         label: Orientation
         horizontal: Horizontal
         vertical: Vertical
+      align:
+        label: Align
+        left: Left
+        right: Right
+        center: Center
       scrollable: Scrollable
       position:
         customize: Customize position