From 18248a2376ec4400ac562faae32be3ec129acca1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jo=C5=BEe=20Fortun?= <joze.fortun@gmail.com>
Date: Tue, 22 Nov 2022 15:37:17 +0100
Subject: [PATCH] Add y axis label position option to charts

---
 .../components/Chart/Report/FunnelChart.vue   |   2 +-
 .../components/Chart/Report/GenericChart.vue  | 140 ++++++++++--------
 .../components/Chart/Report/ReportEdit.vue    |  12 +-
 .../DisplayElements/Configurators/Chart.vue   |  23 ++-
 lib/js/src/compose/types/chart/base.ts        |  12 +-
 lib/js/src/compose/types/chart/chart.ts       |  26 +++-
 lib/js/src/compose/types/chart/util.ts        |   1 +
 .../types/display-elements/chart/base.ts      |   2 +
 .../types/display-elements/chart/basic.ts     |  24 ++-
 locale/en/corteza-webapp-compose/chart.yaml   |   5 +
 .../display-element.yaml                      |   7 +-
 11 files changed, 170 insertions(+), 84 deletions(-)

diff --git a/client/web/compose/src/components/Chart/Report/FunnelChart.vue b/client/web/compose/src/components/Chart/Report/FunnelChart.vue
index 2faeb79b5..403cd098a 100644
--- a/client/web/compose/src/components/Chart/Report/FunnelChart.vue
+++ b/client/web/compose/src/components/Chart/Report/FunnelChart.vue
@@ -28,7 +28,7 @@
     <template #metric-options="{ metric }">
       <b-form-group
         horizontal
-        :label-cols="2"
+        :label-cols="3"
         breakpoint="md"
       >
         <b-form-checkbox
diff --git a/client/web/compose/src/components/Chart/Report/GenericChart.vue b/client/web/compose/src/components/Chart/Report/GenericChart.vue
index 4f1d642e7..898c48e05 100644
--- a/client/web/compose/src/components/Chart/Report/GenericChart.vue
+++ b/client/web/compose/src/components/Chart/Report/GenericChart.vue
@@ -4,10 +4,76 @@
     :modules="modules"
   >
     <template #y-axis="{ report }">
-      <div>
-        <h4 class="mb-3">
-          {{ $t('edit.yAxis.label') }}
-        </h4>
+      <h4 class="mb-3">
+        {{ $t('edit.yAxis.label') }}
+      </h4>
+
+      <b-form-group
+        horizontal
+        :label-cols="3"
+        class="mt-2"
+        breakpoint="md"
+        :label="$t('edit.yAxis.labelLabel')"
+      >
+        <b-input-group>
+          <b-form-input
+            v-model="report.yAxis.label"
+            :placeholder="$t('edit.yAxis.labelPlaceholder')"
+          />
+          <b-input-group-append>
+            <chart-translator
+              :field.sync="report.yAxis.label"
+              :chart="chart"
+              :disabled="isNew"
+              highlight-key="yAxis.label"
+              button-variant="light"
+            />
+          </b-input-group-append>
+        </b-input-group>
+      </b-form-group>
+
+      <b-form-group
+        horizontal
+        :label-cols="3"
+        class="mt-2"
+        breakpoint="md"
+        :label="$t('edit.yAxis.labelPosition.label')"
+      >
+        <b-form-select
+          v-model="report.yAxis.labelPosition"
+          :options="axisLabelPositions"
+        />
+      </b-form-group>
+
+      <b-form-group
+        horizontal
+        :label-cols="3"
+        breakpoint="md"
+        :label="$t('edit.yAxis.minLabel')"
+      >
+        <b-form-input
+          v-model="report.yAxis.min"
+          :placeholder="$t('edit.yAxis.minPlaceholder')"
+        />
+      </b-form-group>
+
+      <b-form-group
+        horizontal
+        :label-cols="3"
+        breakpoint="md"
+        :label="$t('edit.yAxis.maxLabel')"
+      >
+        <b-form-input
+          v-model="report.yAxis.max"
+          :placeholder="$t('edit.yAxis.maxPlaceholder')"
+        />
+      </b-form-group>
+
+      <b-form-group
+        horizontal
+        :label-cols="3"
+        breakpoint="md"
+      >
         <b-form-checkbox
           v-model="report.yAxis.axisType"
           value="logarithmic"
@@ -32,63 +98,13 @@
         >
           {{ $t('edit.yAxis.axisScaleFromZero') }}
         </b-form-checkbox>
-
-        <b-form-group
-          horizontal
-          :label-cols="2"
-          class="mt-2"
-          breakpoint="md"
-          :label="$t('edit.yAxis.labelLabel')"
-        >
-          <b-input-group>
-            <b-form-input
-              v-model="report.yAxis.label"
-              :placeholder="$t('edit.yAxis.labelPlaceholder')"
-            />
-            <b-input-group-append>
-              <chart-translator
-                :field.sync="report.yAxis.label"
-                :chart="chart"
-                :disabled="isNew"
-                highlight-key="yAxis.label"
-                button-variant="light"
-              />
-            </b-input-group-append>
-          </b-input-group>
-        </b-form-group>
-
-        <b-form-group
-          horizontal
-          :label-cols="2"
-          class="mt-1"
-          breakpoint="md"
-          :label="$t('edit.yAxis.minLabel')"
-        >
-          <b-form-input
-            v-model="report.yAxis.min"
-            :placeholder="$t('edit.yAxis.minPlaceholder')"
-          />
-        </b-form-group>
-        <b-form-group
-          horizontal
-          :label-cols="2"
-          class="mt-1"
-          breakpoint="md"
-          :label="$t('edit.yAxis.maxLabel')"
-        >
-          <b-form-input
-            v-model="report.yAxis.max"
-            :placeholder="$t('edit.yAxis.maxPlaceholder')"
-          />
-        </b-form-group>
-      </div>
+      </b-form-group>
     </template>
 
     <template #metric-options="{ metric }">
       <b-form-group
         horizontal
-        :label-cols="2"
-        class="mt-1"
+        :label-cols="3"
         breakpoint="md"
         :label="$t('edit.metric.labelLabel')"
       >
@@ -110,7 +126,7 @@
 
       <b-form-group
         horizontal
-        :label-cols="2"
+        :label-cols="3"
         breakpoint="md"
         :label="$t('edit.metric.fx.label')"
         :description="$t('edit.metric.fx.description')"
@@ -123,7 +139,7 @@
 
       <b-form-group
         horizontal
-        :label-cols="2"
+        :label-cols="3"
         breakpoint="md"
         :label="$t('edit.metric.output.label')"
       >
@@ -143,7 +159,7 @@
 
       <b-form-group
         horizontal
-        :label-cols="2"
+        :label-cols="3"
         breakpoint="md"
         label=""
       >
@@ -221,6 +237,12 @@ export default {
         { value: 'bottom', text: this.$t('edit.metric.legend.bottom') },
         { value: 'right', text: this.$t('edit.metric.legend.right') },
       ],
+
+      axisLabelPositions: [
+        { value: 'end', text: this.$t('edit.yAxis.labelPosition.top') },
+        { value: 'center', text: this.$t('edit.yAxis.labelPosition.center') },
+        { value: 'start', text: this.$t('edit.yAxis.labelPosition.bottom') },
+      ],
     }
   },
 
diff --git a/client/web/compose/src/components/Chart/Report/ReportEdit.vue b/client/web/compose/src/components/Chart/Report/ReportEdit.vue
index ece3578e6..626e897f7 100644
--- a/client/web/compose/src/components/Chart/Report/ReportEdit.vue
+++ b/client/web/compose/src/components/Chart/Report/ReportEdit.vue
@@ -76,7 +76,7 @@
         <template v-if="usesDimensionsField">
           <b-form-group
             horizontal
-            :label-cols="2"
+            :label-cols="3"
             breakpoint="md"
             :label="$t('edit.dimension.fieldLabel')"
           >
@@ -97,7 +97,7 @@
 
           <b-form-group
             horizontal
-            :label-cols="2"
+            :label-cols="3"
             breakpoint="md"
             :label="$t('edit.dimension.function.label')"
           >
@@ -119,7 +119,7 @@
           <template v-if="!unSkippable">
             <b-form-group
               horizontal
-              :label-cols="2"
+              :label-cols="3"
               breakpoint="md"
             >
               <b-form-checkbox
@@ -132,7 +132,7 @@
             <b-form-group
               v-if="!d.skipMissing"
               horizontal
-              :label-cols="2"
+              :label-cols="3"
               breakpoint="md"
               :label="$t('edit.dimension.defaultValueLabel')"
               :description="$t('edit.dimension.defaultValueFootnote')"
@@ -199,7 +199,7 @@
 
           <b-form-group
             horizontal
-            :label-cols="2"
+            :label-cols="3"
             breakpoint="md"
             :label="$t('edit.metric.fieldLabel')"
           >
@@ -220,7 +220,7 @@
 
           <b-form-group
             horizontal
-            :label-cols="2"
+            :label-cols="3"
             breakpoint="md"
             :label="$t('edit.metric.function.label')"
           >
diff --git a/client/web/reporter/src/components/Report/Blocks/DisplayElements/Configurators/Chart.vue b/client/web/reporter/src/components/Report/Blocks/DisplayElements/Configurators/Chart.vue
index eeaee84eb..088ab4007 100644
--- a/client/web/reporter/src/components/Report/Blocks/DisplayElements/Configurators/Chart.vue
+++ b/client/web/reporter/src/components/Report/Blocks/DisplayElements/Configurators/Chart.vue
@@ -244,11 +244,12 @@
             </b-col>
             <b-col>
               <b-form-group
-                :label="$t('display-element:chart.configurator.step-size')"
+                :label="$t('display-element:chart.configurator.y-axis.labelPosition.label')"
                 label-class="text-primary"
               >
-                <b-form-input
-                  v-model="options.yAxis.stepSize"
+                <b-form-select
+                  v-model="options.yAxis.labelPosition"
+                  :options="axisLabelPositions"
                 />
               </b-form-group>
             </b-col>
@@ -277,6 +278,16 @@
                 />
               </b-form-group>
             </b-col>
+            <b-col>
+              <b-form-group
+                :label="$t('display-element:chart.configurator.step-size')"
+                label-class="text-primary"
+              >
+                <b-form-input
+                  v-model="options.yAxis.stepSize"
+                />
+              </b-form-group>
+            </b-col>
           </b-row>
 
           <b-row>
@@ -341,6 +352,12 @@ export default {
         'Record',
         'User',
       ],
+
+      axisLabelPositions: [
+        { value: 'end', text: this.$t('display-element:chart.configurator.y-axis.labelPosition.top') },
+        { value: 'center', text: this.$t('display-element:chart.configurator.y-axis.labelPosition.center') },
+        { value: 'start', text: this.$t('display-element:chart.configurator.y-axis.labelPosition.bottom') },
+      ],
     }
   },
 
diff --git a/lib/js/src/compose/types/chart/base.ts b/lib/js/src/compose/types/chart/base.ts
index edc351340..af61dd9ad 100644
--- a/lib/js/src/compose/types/chart/base.ts
+++ b/lib/js/src/compose/types/chart/base.ts
@@ -164,14 +164,12 @@ export class BaseChart {
 
     // helper to choose between eight the provided value, default value or a generic 'undefined'
     const pickValue = (val: unknown, { default: dDft }: Dimension): unknown => {
-      if (val !== undefined && val !== null) return val
-      if (dDft !== undefined && dDft !== null) return dDft
-      return 'undefined'
+      return val ? val : dDft || 'undefined'
     }
 
     // Skip missing values; if so requested
     if (dimension.skipMissing) {
-      results = results.filter((r: any) => r[dLabel] !== null)
+      results = results.filter((r: any) => r[dLabel])
     }
 
     // Not a time dimensions, build set of labels
@@ -267,7 +265,11 @@ export class BaseChart {
       filter: '',
       dimensions: [this.defDimension()],
       metrics: [this.defMetrics()],
-      yAxis: {},
+      yAxis: {
+        axisType: 'linear',
+        axisPosition: 'left',
+        labelPosition: 'end',
+      },
     })
   }
 
diff --git a/lib/js/src/compose/types/chart/chart.ts b/lib/js/src/compose/types/chart/chart.ts
index 55249af15..99c2901a2 100644
--- a/lib/js/src/compose/types/chart/chart.ts
+++ b/lib/js/src/compose/types/chart/chart.ts
@@ -116,19 +116,34 @@ export default class Chart extends BaseChart {
           label: yLabel,
           axisType: yType = 'linear',
           axisPosition: position = 'left',
+          labelPosition = 'end',
           beginAtZero,
           min,
           max,
         } = yAxis
 
+
         const tempYAxis = {
           name: yLabel,
           type: yType === 'linear' ? 'value' : 'log',
           position,
-          nameLocation: 'center',
-          nameGap: 30,
+          nameGap: labelPosition === 'center' ? 25 : 7,
+          nameLocation: labelPosition,
           min: beginAtZero ? 0 : min || undefined,
           max: max || undefined,
+          axisLabel: {
+            interval: 0,
+            overflow: 'truncate',
+            hideOverlap: true,
+          },
+          axisLine: {
+            show: true,
+            onZero: false,
+          },
+          nameTextStyle: {
+            align: labelPosition === 'center' ? 'center' : position,
+            padding: labelPosition !== 'center' ? (position === 'left' ? [0, 0, 2, -20] : [0, -20, 2, 0]) : undefined,
+          }
         }
 
         // If we provide undefined, log scale breaks
@@ -199,9 +214,10 @@ export default class Chart extends BaseChart {
         }
 
         options.grid = {
-          top: 35,
-          bottom: 10,
-          // prevents long labels like dates from being cut off
+          top: 45,
+          bottom: 25,
+          left: 40,
+          right: 40,
           containLabel: true,
         }
 
diff --git a/lib/js/src/compose/types/chart/util.ts b/lib/js/src/compose/types/chart/util.ts
index 25b0f1e9c..8a657ccf4 100644
--- a/lib/js/src/compose/types/chart/util.ts
+++ b/lib/js/src/compose/types/chart/util.ts
@@ -52,6 +52,7 @@ export interface YAxis {
   axisType?: string;
   beginAtZero?: boolean;
   label?: string;
+  labelPosition?: string;
   min?: string;
   max?: string;
 }
diff --git a/lib/js/src/reporter/types/display-elements/chart/base.ts b/lib/js/src/reporter/types/display-elements/chart/base.ts
index 81dd5d1a6..f98ae4e17 100644
--- a/lib/js/src/reporter/types/display-elements/chart/base.ts
+++ b/lib/js/src/reporter/types/display-elements/chart/base.ts
@@ -16,6 +16,7 @@ interface XAxisOptions {
 
 interface YAxisOptions {
   label?: string;
+  labelPosition?: string;
   type?: string;
   position?: string;
   beginAtZero?: boolean;
@@ -41,6 +42,7 @@ export class ChartOptions {
   public yAxis: YAxisOptions = {
     type: 'linear',
     position: 'left',
+    labelPosition: 'end',
     beginAtZero: true,
   }
 
diff --git a/lib/js/src/reporter/types/display-elements/chart/basic.ts b/lib/js/src/reporter/types/display-elements/chart/basic.ts
index 2e6a2157e..0e345241e 100644
--- a/lib/js/src/reporter/types/display-elements/chart/basic.ts
+++ b/lib/js/src/reporter/types/display-elements/chart/basic.ts
@@ -96,8 +96,10 @@ export class BasicChartOptions extends ChartOptions {
       ]
 
       options.grid = {
-        top: this.title ? 60 : 35,
-        bottom: xLabel ? 30 : 20,
+        top: this.title ? 70 : 45,
+        bottom: xLabel ? 30 : 25,
+        left: 40,
+        right: 40,
         containLabel: true,
       }
 
@@ -105,6 +107,7 @@ export class BasicChartOptions extends ChartOptions {
         label: yLabel,
         type: yType = 'linear',
         position = 'left',
+        labelPosition = 'end',
         beginAtZero,
         min,
         max,
@@ -114,10 +117,23 @@ export class BasicChartOptions extends ChartOptions {
         name: yLabel,
         type: yType === 'linear' ? 'value' : 'log',
         position,
-        nameLocation: 'center',
-        nameGap: 30,
+        nameGap: labelPosition === 'center' ? 25 : 7,
+        nameLocation: labelPosition,
         min: beginAtZero ? 0 : min || undefined,
         max: max || undefined,
+        axisLabel: {
+          interval: 0,
+          overflow: 'truncate',
+          hideOverlap: true,
+        },
+        axisLine: {
+          show: true,
+          onZero: false,
+        },
+        nameTextStyle: {
+          align: labelPosition === 'center' ? 'center' : position,
+          padding: labelPosition !== 'center' ? (position === 'left' ? [0, 0, 2, -20] : [0, -20, 2, 0]) : undefined,
+        }
       }
 
       // If we provide undefined, log scale breaks
diff --git a/locale/en/corteza-webapp-compose/chart.yaml b/locale/en/corteza-webapp-compose/chart.yaml
index c5bb0348c..3a4065316 100644
--- a/locale/en/corteza-webapp-compose/chart.yaml
+++ b/locale/en/corteza-webapp-compose/chart.yaml
@@ -106,6 +106,11 @@ edit:
     label: Y-axis
     labelLabel: Axis label
     labelPlaceholder: Axis label
+    labelPosition:
+      label: Label position
+      top: Top
+      center: Center
+      bottom: Bottom
     logarithmicScale: Logarithmic scale
     maxLabel: Max value
     maxPlaceholder: Maximum value
diff --git a/locale/en/corteza-webapp-reporter/display-element.yaml b/locale/en/corteza-webapp-reporter/display-element.yaml
index 6a67f2e53..8d3841eea 100644
--- a/locale/en/corteza-webapp-reporter/display-element.yaml
+++ b/locale/en/corteza-webapp-reporter/display-element.yaml
@@ -35,7 +35,7 @@ chart:
       line: Line
       pie: Pie
     value:
-      max: Max
+      max: Max value
       min: Min value
     x-axis: 
       name: X-Axis
@@ -44,6 +44,11 @@ chart:
     y-axis:
       name: Y-Axis
       label: Axis label
+      labelPosition:
+        label: Label position
+        top: Top
+        center: Center
+        bottom: Bottom
 metric:
   configurator:
     color: