Add y axis label position option to charts

2022-11-22 15:37:17 +01:00
parent a0ef3ff2bc
commit 18248a2376
11 changed files with 170 additions and 84 deletions
--- 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
--- 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') },
+      ],
    }
  },

--- 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')"
          >
--- 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') },
+      ],
    }
  },

--- 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',
+      },
    })
  }

--- 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,
        }

--- 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;
 }
--- 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,
  }

--- 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
--- 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
--- 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: