Sync compose and reporter chart configurator options

client/web/reporter/src/components/Report/Blocks/DisplayElements/Configurators/Chart.vue

@@ -8,7 +8,10 @@
       </h5>
 
       <b-row>
-        <b-col>
+        <b-col
+          cols="12"
+          sm="6"
+        >
           <b-form-group
             :label="$t('display-element:chart.configurator.type')"
             label-class="text-primary"
@@ -20,7 +23,11 @@
             />
           </b-form-group>
         </b-col>
-        <b-col>
+
+        <b-col
+          cols="12"
+          sm="6"
+        >
           <b-form-group
             :label="$t('display-element:chart.configurator.chart-title')"
             label-class="text-primary"
@@ -33,7 +40,10 @@
       </b-row>
 
       <b-row>
-        <b-col>
+        <b-col
+          cols="12"
+          sm="6"
+        >
           <b-form-group
             :label="$t('display-element:chart.configurator.color-scheme')"
             label-class="text-primary"
@@ -48,7 +58,8 @@
               option-text="label"
               option-value="value"
               clearable
-              class="h-100 w-100"
+              class="mw-100"
+              style="min-width: 100%;"
             >
               <template #option="option">
                 <p
@@ -64,6 +75,7 @@
                 />
               </template>
             </vue-select>
+
             <template
               v-if="currentColorScheme"
             >
@@ -76,22 +88,6 @@
             </template>
           </b-form-group>
         </b-col>
-        <b-col
-          align-self="center"
-        >
-          <b-form-checkbox
-            v-model="options.showTooltips"
-            class="pb-2"
-          >
-            {{ $t('display-element:chart.configurator.show.tooltips') }}
-          </b-form-checkbox>
-          <b-form-checkbox
-            v-model="options.showLegend"
-            class="pb-2"
-          >
-            {{ $t('display-element:chart.configurator.show.legend') }}
-          </b-form-checkbox>
-        </b-col>
       </b-row>
       <hr>
     </div>
@@ -194,22 +190,15 @@
             </b-col>
             <b-col>
               <b-form-group
-                v-if="options.xAxis.type === 'time'"
+                :label="$t('display-element:chart.configurator.x-axis.labelRotation.label')"
-                :label="$t('display-element:chart.configurator.time.unit.label')"
                 label-class="text-primary"
+                class="mb-1"
               >
-                <b-form-select
+                <b-input
-                  v-model="options.xAxis.unit"
+                  v-model="options.xAxis.labelRotation"
-                  :options="timeUnits"
+                  type="number"
-                >
+                  number
-                  <template #first>
+                />
-                    <b-form-select-option
-                      :value="undefined"
-                    >
-                      {{ $t('display-element:chart.configurator.default') }}
-                    </b-form-select-option>
-                  </template>
-                </b-form-select>
               </b-form-group>
             </b-col>
           </b-row>
@@ -243,6 +232,19 @@
                 />
               </b-form-group>
             </b-col>
+            <b-col>
+              <b-form-group
+                :label="$t('display-element:chart.configurator.y-axis.labelRotation.label')"
+                label-class="text-primary"
+                class="mb-1"
+              >
+                <b-input
+                  v-model="options.yAxis.labelRotation"
+                  type="number"
+                  number
+                />
+              </b-form-group>
+            </b-col>
           </b-row>
 
           <b-row>
@@ -254,6 +256,7 @@
                 <b-form-input
                   v-model="options.yAxis.min"
                   type="number"
+                  number
                 />
               </b-form-group>
             </b-col>
@@ -283,12 +286,6 @@
           <b-row>
             <b-col>
               <b-form-group>
-                <b-form-checkbox
-                  v-model="options.yAxis.beginAtZero"
-                >
-                  {{ $t('display-element:chart.configurator.begin-axis-at-zero') }}
-                </b-form-checkbox>
-
                 <b-form-checkbox
                   v-model="options.yAxis.type"
                   value="logarithmic"
@@ -297,6 +294,12 @@
                   {{ $t('display-element:chart.configurator.logarithmic-scale') }}
                 </b-form-checkbox>
 
+                <b-form-checkbox
+                  v-model="options.yAxis.beginAtZero"
+                >
+                  {{ $t('display-element:chart.configurator.begin-axis-at-zero') }}
+                </b-form-checkbox>
+
                 <b-form-checkbox
                   v-model="options.yAxis.position"
                   value="right"
@@ -309,6 +312,249 @@
           </b-row>
         </div>
       </div>
+
+      <hr>
+
+      <div>
+        <h5 class="text-primary mb-2">
+          {{ $t('display-element:chart.configurator.legend.name') }}
+        </h5>
+
+        <b-form-checkbox
+          v-model="options.legend.hide"
+          class="mb-3"
+        >
+          {{ $t('display-element:chart.configurator.legend.hide') }}
+        </b-form-checkbox>
+
+        <b-row v-if="!options.legend.hide">
+          <b-col
+            cols="12"
+            sm="6"
+          >
+            <b-form-group
+              :label="$t('display-element:chart.configurator.legend.align.label')"
+              label-class="text-primary"
+              class="mb-1"
+            >
+              <b-form-select
+                v-model="options.legend.align"
+                :options="alignments"
+                :disabled="!options.legend.position.default"
+              />
+            </b-form-group>
+          </b-col>
+
+          <b-col
+            cols="12"
+            sm="6"
+          >
+            <b-form-group
+              :label="$t('display-element:chart.configurator.legend.orientation.label')"
+              label-class="text-primary"
+              class="mb-1"
+            >
+              <b-form-select
+                v-model="options.legend.orientation"
+                :options="orientations"
+              />
+            </b-form-group>
+          </b-col>
+
+          <b-col
+            cols="12"
+            sm="6"
+          >
+            <b-form-checkbox
+              v-model="options.legend.position.default"
+              :class="{ 'mb-3': !options.legend.position.default }"
+            >
+              {{ $t('display-element:chart.configurator.legend.position.default') }}
+            </b-form-checkbox>
+          </b-col>
+
+          <b-col
+            cols="12"
+            sm="6"
+          >
+            <b-form-checkbox
+              v-model="options.legend.scrollable"
+              :disabled="options.legend.orientation !== 'horizontal'"
+            >
+              {{ $t('display-element:chart.configurator.legend.scrollable') }}
+            </b-form-checkbox>
+          </b-col>
+
+          <template
+            v-if="!options.legend.position.default"
+          >
+            <b-col
+              cols="12"
+              sm="6"
+              xl="3"
+            >
+              <b-form-group
+                :label="$t('display-element:chart.configurator.legend.position.top')"
+                label-class="text-primary"
+              >
+                <b-input
+                  v-model="options.legend.position.top"
+                />
+              </b-form-group>
+            </b-col>
+
+            <b-col
+              cols="12"
+              sm="6"
+              xl="3"
+            >
+              <b-form-group
+                :label="$t('display-element:chart.configurator.legend.position.right')"
+                label-class="text-primary"
+              >
+                <b-input
+                  v-model="options.legend.position.right"
+                />
+              </b-form-group>
+            </b-col>
+
+            <b-col
+              cols="12"
+              sm="6"
+              xl="3"
+            >
+              <b-form-group
+                :label="$t('display-element:chart.configurator.legend.position.bottom')"
+                label-class="text-primary"
+              >
+                <b-input
+                  v-model="options.legend.position.bottom"
+                />
+              </b-form-group>
+            </b-col>
+
+            <b-col
+              cols="12"
+              sm="6"
+              xl="3"
+            >
+              <b-form-group
+                :label="$t('display-element:chart.configurator.legend.position.left')"
+                label-class="text-primary"
+              >
+                <b-input
+                  v-model="options.legend.position.left"
+                />
+              </b-form-group>
+            </b-col>
+
+            <b-col>
+              <small>{{ $t('display-element:chart.configurator.position-description') }}</small>
+            </b-col>
+          </template>
+        </b-row>
+      </div>
+
+      <hr>
+
+      <div>
+        <h5 class="text-primary mb-2">
+          {{ $t('display-element:chart.configurator.tooltips.name') }}
+        </h5>
+
+        <b-row>
+          <b-col>
+            <b-form-checkbox
+              v-model="options.showTooltipsAlways"
+            >
+              {{ $t('display-element:chart.configurator.tooltips.show.always') }}
+            </b-form-checkbox>
+          </b-col>
+        </b-row>
+      </div>
+
+      <hr>
+
+      <div class="mb-2">
+        <h5 class="text-primary mb-2">
+          {{ $t('display-element:chart.configurator.offset.name') }}
+        </h5>
+
+        <b-form-checkbox
+          v-model="options.offset.default"
+          class="mb-3"
+        >
+          {{ $t('display-element:chart.configurator.offset.default') }}
+        </b-form-checkbox>
+
+        <b-row v-if="!options.offset.default">
+          <b-col
+            cols="12"
+            sm="6"
+            xl="3"
+          >
+            <b-form-group
+              :label="$t('display-element:chart.configurator.offset.top')"
+              label-class="text-primary"
+            >
+              <b-input
+                v-model="options.offset.top"
+              />
+            </b-form-group>
+          </b-col>
+
+          <b-col
+            cols="12"
+            sm="6"
+            xl="3"
+          >
+            <b-form-group
+              :label="$t('display-element:chart.configurator.offset.right')"
+              label-class="text-primary"
+            >
+              <b-input
+                v-model="options.offset.right"
+              />
+            </b-form-group>
+          </b-col>
+
+          <b-col
+            cols="12"
+            sm="6"
+            xl="3"
+          >
+            <b-form-group
+              :label="$t('display-element:chart.configurator.offset.bottom')"
+              label-class="text-primary"
+            >
+              <b-input
+                v-model="options.offset.bottom"
+              />
+            </b-form-group>
+          </b-col>
+
+          <b-col
+            cols="12"
+            sm="6"
+            xl="3"
+          >
+            <b-form-group
+              :label="$t('display-element:chart.configurator.offset.left')"
+              label-class="text-primary"
+            >
+              <b-input
+                v-model="options.offset.left"
+              />
+            </b-form-group>
+          </b-col>
+
+          <b-col
+            cols="12"
+          >
+            <small>{{ $t('display-element:chart.configurator.position-description') }}</small>
+          </b-col>
+        </b-row>
+      </div>
     </div>
   </div>
 </template>
@@ -350,6 +596,17 @@ export default {
         { 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') },
       ],
+
+      orientations: [
+        { value: 'horizontal', text: this.$t('display-element:chart.configurator.legend.orientation.horizontal') },
+        { value: 'vertical', text: this.$t('display-element:chart.configurator.legend.orientation.vertical') },
+      ],
+
+      alignments: [
+        { value: 'left', text: this.$t('display-element:chart.configurator.legend.align.left') },
+        { value: 'center', text: this.$t('display-element:chart.configurator.legend.align.center') },
+        { value: 'right', text: this.$t('display-element:chart.configurator.legend.align.right') },
+      ],
     }
   },
 

client/web/reporter/src/themes/corteza-base/custom.scss

@@ -61,7 +61,6 @@ th {
 
 .v-select {
   min-width: 20vw;
-  max-width: 300px;
 
   &:not(.vs--open) .vs__selected + .vs__search {
     width: 0;

lib/js/src/reporter/types/display-elements/chart/base.ts

@@ -12,11 +12,13 @@ interface XAxisOptions {
   unit?: string;
   skipMissing: boolean;
   defaultValue?: any;
+  labelRotation: number;
 }
 
 interface YAxisOptions {
   label?: string;
   labelPosition?: string;
+  labelRotation: number;
   type?: string;
   position?: string;
   beginAtZero?: boolean;
@@ -25,32 +27,77 @@ interface YAxisOptions {
   max?: string;
 }
 
+interface Legend {
+  hide: boolean;
+  orientation: string;
+  align: string;
+  scrollable: boolean;
+  position: Offset;
+}
+
+interface Tooltips {
+  showAlways: boolean;
+}
+
+interface Offset {
+  default: boolean;
+  top?: string;
+  right?: string;
+  bottom?: string;
+  left?: string;
+}
+
 export class ChartOptions {
   public title = ''
   public type = 'bar'
   public colorScheme = ''
   public source = ''
   public datasources: Array<FrameDefinition> = []
-  public showTooltips = true
-  public showLegend = true
 
   public xAxis: XAxisOptions = {
     type: '',
     skipMissing: true,
+    labelRotation: 0,
   }
 
   public yAxis: YAxisOptions = {
     type: 'linear',
     position: 'left',
     labelPosition: 'end',
+    labelRotation: 0,
     beginAtZero: true,
   }
 
+  public legend: Legend = {
+    hide: false,
+    orientation: 'horizontal',
+    align: 'center',
+    scrollable: true,
+    position: {
+      default: true,
+      top: undefined,
+      right: undefined,
+      bottom: undefined,
+      left: undefined,
+    }
+  }
+
+  public tooltips: Tooltips = {
+    showAlways: false,
+  }
+
+  public offset: Offset = {
+    default: true,
+    top: undefined,
+    right: undefined,
+    bottom: undefined,
+    left: undefined,
+  }
+
   constructor (o: PartialChartOptions = {}) {
     if (!o) return
 
     Apply(this, o, String, 'title', 'type', 'colorScheme', 'source')
-    Apply(this, o, Boolean, 'showTooltips', 'showLegend')
 
     if (o.datasources) {
       this.datasources = o.datasources
@@ -63,6 +110,18 @@ export class ChartOptions {
     if (o.yAxis) {
       this.yAxis = { ...this.yAxis, ...o.yAxis }
     }
+
+    if (o.legend) {
+      this.legend = { ...this.legend, ...o.legend }
+    }
+
+    if (o.tooltips) {
+      this.tooltips = { ...this.tooltips, ...o.tooltips }
+    }
+
+    if (o.offset) {
+      this.offset = { ...this.offset, ...o.offset }
+    }
   }
 }
 

lib/js/src/reporter/types/display-elements/chart/basic.ts

@@ -27,7 +27,7 @@ export class BasicChartOptions extends ChartOptions {
       xAxis: [],
       yAxis: [],
       tooltip: {
-        show: this.showTooltips,
+        show: true,
         appendToBody: true,
       },
     }
@@ -52,11 +52,11 @@ export class BasicChartOptions extends ChartOptions {
             formatter: '{a}<br />{b} : {c} ({d}%)',
           },
           label: {
-            show: false,
+            show: this.showTooltipsAlways,
             position: 'inside',
             align: 'center',
             verticalAlign: 'middle',
-            fontSize: 14,
+            formatter: '{c} ({d}%)',
           },
           itemStyle: {
             borderRadius: 5,
@@ -73,12 +73,20 @@ export class BasicChartOptions extends ChartOptions {
           data: labels.map((name, i) => {
             return { name, value: data[i] }
           }),
+          top: this.offset.default ? undefined : this.offset.top,
+          right: this.offset.default ? undefined : this.offset.right,
+          bottom: this.offset.default ? undefined : this.offset.bottom,
+          left: this.offset.default ? undefined : this.offset.left,
         }
       })
     } else if (['bar', 'line'].includes(this.type)) {
       options.tooltip.trigger = 'axis'
 
-      const { label: xLabel, type: xType = 'category' } = this.xAxis
+      const {
+        label: xLabel,
+        type: xType = 'category',
+        labelRotation: xLabelRotation = 0
+      } = this.xAxis
 
       options.xAxis = [
         {
@@ -91,20 +99,22 @@ export class BasicChartOptions extends ChartOptions {
             interval: 0,
             overflow: 'truncate',
             hideOverlap: true,
+            rotate: xLabelRotation,
           },
         },
       ]
 
       options.grid = {
-        top: this.title ? 70 : 45,
+        top: this.offset.default ? (this.title ? 70 : 45) : this.offset.top,
-        bottom: xLabel ? 30 : 25,
+        right: this.offset.default ? 30 : this.offset.right,
-        left: 40,
+        bottom: this.offset.default ? (xLabel ? 30 : 25) : this.offset.bottom,
-        right: 40,
+        left: this.offset.default ? 30 : this.offset.left,
         containLabel: true,
       }
 
       const {
         label: yLabel,
+        labelRotation: yLabelRotation = 0,
         type: yType = 'linear',
         position = 'left',
         labelPosition = 'end',
@@ -125,6 +135,7 @@ export class BasicChartOptions extends ChartOptions {
           interval: 0,
           overflow: 'truncate',
           hideOverlap: true,
+          rotate: yLabelRotation,
         },
         axisLine: {
           show: true,
@@ -152,11 +163,10 @@ export class BasicChartOptions extends ChartOptions {
           areaStyle: {},
           left: 'left',
           label: {
-            show: false,
+            show: this.showTooltipsAlways,
             position: 'inside',
             align: 'center',
             verticalAlign: 'middle',
-            fontSize: 14,
           },
           data: xType === 'time' ? labels.map((name, i) => {
             return [moment(name).valueOf() || undefined, data[i]]
@@ -178,9 +188,13 @@ export class BasicChartOptions extends ChartOptions {
         fontFamily: 'Poppins-Regular',
       },
       legend: {
-        show: this.showLegend,
+        show: !this.legend.hide,
-        top: this.title ? 25 : undefined,
+        type: this.legend.scrollable ? 'scroll' : 'plain',
-        type: 'scroll',
+        top: (this.legend.position.default ? (this.title ? 25 : undefined) : this.legend.position.top) || undefined,
+        right: (this.legend.position.default ? undefined : this.legend.position.right) || undefined,
+        bottom: (this.legend.position.default ? undefined : this.legend.position.bottom) || undefined,
+        left: (this.legend.position.default ? this.legend.align || 'center' : this.legend.position.left) || 'auto',
+        orient: this.legend.orientation || 'horizontal'
       },
       ...options,
     }

lib/js/src/reporter/types/display-elements/chart/funnel.ts

@@ -36,42 +36,40 @@ export class FunnelChartOptions extends ChartOptions {
         fontFamily: 'Poppins-Regular',
       },
       tooltip: {
-        show: this.showTooltips,
+        show: true,
         trigger: 'item',
         formatter: '{b} : {c} ({d}%)',
         appendToBody: true,
       },
       legend: {
-        show: this.showLegend,
+        show: !this.legend.hide,
-        top: this.title ? 25 : undefined,
+        type: this.legend.scrollable ? 'scroll' : 'plain',
-        type: 'scroll',
+        top: (this.legend.position.default ? (this.title ? 25 : undefined) : this.legend.position.top) || undefined,
+        right: (this.legend.position.default ? undefined : this.legend.position.right) || undefined,
+        bottom: (this.legend.position.default ? undefined : this.legend.position.bottom) || undefined,
+        left: (this.legend.position.default ? this.legend.align || 'center' : this.legend.position.left) || 'auto',
+        orient: this.legend.orientation || 'horizontal'
       },
       series: [
         {
           type: 'funnel',
           name: this.labelColumn,
           sort: 'descending',
-          min: 1,
-          top: this.title ? 60 : 35,
-          left: '5%',
-          bottom: '5%',
           width: '90%',
           label: {
-            show: false,
+            show: this.showTooltipsAlways,
             position: 'inside',
             align: 'center',
             verticalAlign: 'middle',
-          },
+            formatter: '{c} ({d}%)',
-          emphasis: {
-            label: {
-              show: !this.showTooltips,
-              fontSize: 14,
-              formatter: '{c} ({d}%)',
-            },
           },
           data: labels.map((name, i) => {
             return { name, value: data[i], itemStyle: { color: colors[i] } }
           }),
+          top: this.offset.default ? (this.title ? 60 : 35) : this.offset.top,
+          right: this.offset.default ? '5%' : this.offset.right,
+          bottom: this.offset.default ? '5%' : this.offset.bottom,
+          left: this.offset.default ? '5%' : this.offset.left,
         },
       ],
     }

locale/en/corteza-webapp-reporter/display-element.yaml

@@ -10,16 +10,14 @@ chart:
     general: General
     label-column: Label column
     logarithmic-scale: Logarithmic scale
+    position-description: Values can be set as pixels (20) or as percentages (20%)
     none: None
     place-axis-on-right-side: Place axis on the right side
-    show:
-      tooltips: Show tooltips
-      legend: Show legend
     skip-missing-values: Skip missing values
     step-size: Step size
     time:
       label: Time
-      unit: 
+      unit:
         label: Time unit
         types:
           date: Date
@@ -37,10 +35,12 @@ chart:
     value:
       max: Max value
       min: Min value
-    x-axis: 
+    x-axis:
       name: X-Axis
       label: Axis label
       type: Axis type
+      labelRotation:
+        label: Rotate labels
     y-axis:
       name: Y-Axis
       label: Axis label
@@ -49,6 +49,39 @@ chart:
         top: Top
         center: Center
         bottom: Bottom
+      labelRotation:
+        label: Rotate labels
+    legend:
+      name: Legend
+      hide: Hide legend
+      scrollable: Scrollable
+      orientation:
+        label: Orientation
+        horizontal: Horizontal
+        vertical: Vertical
+      align:
+        label: Align
+        left: Left
+        right: Right
+        center: Center
+      position:
+        description: Values c
+        default: Default position
+        top: Top
+        right: Right
+        bottom: Bottom
+        left: Left
+    tooltips:
+      name: Tooltips
+      show:
+        always: Always show tooltips
+    offset:
+      name: Offset
+      default: Default offset
+      top: Top
+      right: Right
+      bottom: Bottom
+      left: Left
 metric:
   configurator:
     color:
@@ -70,7 +103,7 @@ table:
     light: Light
     none: None
     table:
-      options: 
+      options:
         bordered: Bordered
         borderless: Borderless
         dark: Dark