From 12f427fa7fcbf62d8c9d0575f3795680cf5b775b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jo=C5=BEe=20Fortun?= <joze.fortun@gmail.com>
Date: Tue, 11 Apr 2023 15:03:00 +0200
Subject: [PATCH] Adjust chart configurator styles and logic

---
 .../components/Chart/Report/FunnelChart.vue   |  87 ++--
 .../components/Chart/Report/GaugeChart.vue    |  18 +-
 .../components/Chart/Report/GenericChart.vue  | 314 +++++++-------
 .../components/Chart/Report/ReportEdit.vue    | 102 ++---
 .../compose/src/views/Admin/Charts/Edit.vue   | 391 +++++++++---------
 locale/en/corteza-webapp-compose/chart.yaml   |  24 +-
 6 files changed, 468 insertions(+), 468 deletions(-)

diff --git a/client/web/compose/src/components/Chart/Report/FunnelChart.vue b/client/web/compose/src/components/Chart/Report/FunnelChart.vue
index abe490cd5..8ae4493b1 100644
--- a/client/web/compose/src/components/Chart/Report/FunnelChart.vue
+++ b/client/web/compose/src/components/Chart/Report/FunnelChart.vue
@@ -7,70 +7,57 @@
     un-skippable
   >
     <template #dimension-options="{ index, dimension, field }">
-      <c-item-picker
-        v-if="showPicker(field)"
-        :value="getOptions(dimension)"
-        :options="field.options.options"
-        :labels="{
-          searchPlaceholder:$t('edit.dimension.optionsPicker.searchPlaceholder'),
-          availableItems: $t('edit.dimension.optionsPicker.availableItems'),
-          selectAllItems: $t('edit.dimension.optionsPicker.selectAllItems'),
-          selectedItems: $t('edit.dimension.optionsPicker.selectedItems'),
-          unselectAllItems: $t('edit.dimension.optionsPicker.unselectAllItems'),
-          noItemsFound: $t('edit.dimension.optionsPicker.noItemsFound'),
-        }"
-        class="d-flex flex-column"
-        style="height: 100% !important;"
-        @update:value="setOptions(index, field, $event)"
-      />
+      <b-form-group
+        :label="$t('edit.dimension.options.label')"
+        label-class="text-primary"
+      >
+        <c-item-picker
+          v-if="showPicker(field)"
+          :value="getOptions(dimension)"
+          :options="field.options.options"
+          :labels="{
+            searchPlaceholder:$t('edit.dimension.optionsPicker.searchPlaceholder'),
+            availableItems: $t('edit.dimension.optionsPicker.availableItems'),
+            selectAllItems: $t('edit.dimension.optionsPicker.selectAllItems'),
+            selectedItems: $t('edit.dimension.optionsPicker.selectedItems'),
+            unselectAllItems: $t('edit.dimension.optionsPicker.unselectAllItems'),
+            noItemsFound: $t('edit.dimension.optionsPicker.noItemsFound'),
+          }"
+          class="d-flex flex-column"
+          style="height: 100% !important;"
+          @update:value="setOptions(index, field, $event)"
+        />
+      </b-form-group>
     </template>
 
     <template #metric-options="{ metric }">
-      <b-row
-        class="text-primary"
-      >
+      <b-row>
         <b-col
           cols="12"
           md="6"
+          offset-md="6"
         >
           <b-form-group
-            :label="$t('edit.metric.cumulative')"
+            :label="$t('edit.metric.options.label')"
+            label-class="text-primary"
           >
-            <c-input-checkbox
+            <b-form-checkbox
               v-model="metric.cumulative"
-              switch
-              :labels="checkboxLabel"
-            />
-          </b-form-group>
-        </b-col>
+            >
+              {{ $t('edit.metric.cumulative') }}
+            </b-form-checkbox>
 
-        <b-col
-          cols="12"
-          md="6"
-        >
-          <b-form-group
-            :label="$t('edit.metric.relative')"
-          >
-            <c-input-checkbox
+            <b-form-checkbox
               v-model="metric.relativeValue"
-              switch
-              :labels="checkboxLabel"
-            />
-          </b-form-group>
-        </b-col>
+            >
+              {{ $t('edit.metric.relative') }}
+            </b-form-checkbox>
 
-        <b-col
-          cols="12"
-          md="6"
-        >
-          <b-form-group
-            :label="$t('edit.metric.fixTooltips')"
-          >
-            <c-input-checkbox
+            <b-form-checkbox
               v-model="metric.fixTooltips"
-              switch
-              :labels="checkboxLabel"
-            />
+            >
+              {{ $t('edit.metric.fixTooltips') }}
+            </b-form-checkbox>
           </b-form-group>
         </b-col>
       </b-row>
diff --git a/client/web/compose/src/components/Chart/Report/GaugeChart.vue b/client/web/compose/src/components/Chart/Report/GaugeChart.vue
index 42e394aec..0b0796cd6 100644
--- a/client/web/compose/src/components/Chart/Report/GaugeChart.vue
+++ b/client/web/compose/src/components/Chart/Report/GaugeChart.vue
@@ -9,7 +9,7 @@
     <template #dimension-options="{ dimension }">
       <b-form-group
         :label="$t('edit.dimension.gaugeSteps')"
-        class="text-primary"
+        label-class="text-primary"
       >
         <b-input-group
           v-for="(step, i) in dimension.meta.steps"
@@ -61,9 +61,7 @@
     </template>
 
     <template #metric-options="{ metric }">
-      <b-row
-        class="text-primary"
-      >
+      <b-row>
         <b-col
           cols="12"
           md="6"
@@ -71,6 +69,7 @@
           <b-form-group
             :label="$t('edit.metric.fx.label')"
             :description="$t('edit.metric.fx.description')"
+            label-class="text-primary"
           >
             <b-form-textarea
               v-model="metric.fx"
@@ -84,13 +83,14 @@
           md="6"
         >
           <b-form-group
-            :label="$t('edit.metric.fixTooltips')"
+            :label="$t('edit.metric.options.label')"
+            label-class="text-primary"
           >
-            <c-input-checkbox
+            <b-form-checkbox
               v-model="metric.fixTooltips"
-              switch
-              :labels="checkboxLabel"
-            />
+            >
+              {{ $t('edit.metric.fixTooltips') }}
+            </b-form-checkbox>
           </b-form-group>
         </b-col>
       </b-row>
diff --git a/client/web/compose/src/components/Chart/Report/GenericChart.vue b/client/web/compose/src/components/Chart/Report/GenericChart.vue
index 1df4a7c85..3b49cd073 100644
--- a/client/web/compose/src/components/Chart/Report/GenericChart.vue
+++ b/client/web/compose/src/components/Chart/Report/GenericChart.vue
@@ -11,15 +11,14 @@
           {{ $t('edit.yAxis.label') }}
         </h5>
 
-        <b-row
-          class="text-primary"
-        >
+        <b-row>
           <b-col
             cols="12"
             md="6"
           >
             <b-form-group
               :label="$t('edit.yAxis.labelLabel')"
+              label-class="text-primary"
             >
               <b-input-group>
                 <b-form-input
@@ -44,6 +43,7 @@
           >
             <b-form-group
               :label="$t('edit.yAxis.labelPosition.label')"
+              label-class="text-primary"
             >
               <b-form-select
                 v-model="report.yAxis.labelPosition"
@@ -58,6 +58,7 @@
           >
             <b-form-group
               :label="$t('edit.yAxis.minLabel')"
+              label-class="text-primary"
             >
               <b-form-input
                 v-model="report.yAxis.min"
@@ -73,6 +74,7 @@
           >
             <b-form-group
               :label="$t('edit.yAxis.maxLabel')"
+              label-class="text-primary"
             >
               <b-form-input
                 v-model="report.yAxis.max"
@@ -89,6 +91,7 @@
             <b-form-group
               :label="$t('edit.yAxis.rotate.label')"
               :description="$t('edit.yAxis.rotate.description')"
+              label-class="text-primary"
             >
               <b-input
                 v-model="report.yAxis.rotateLabel"
@@ -103,6 +106,7 @@
           >
             <b-form-group
               :label="$t('edit.yAxis.options.label')"
+              label-class="text-primary"
             >
               <b-form-checkbox
                 v-model="report.yAxis.axisType"
@@ -134,13 +138,12 @@
     <template #metric-options="{ metric }">
       <b-row>
         <b-col
-          v-if="!['pie', 'doughnut'].includes(metric.type)"
           cols="12"
           md="6"
         >
           <b-form-group
             :label="$t('edit.metric.labelLabel')"
-            class="text-primary"
+            label-class="text-primary"
           >
             <b-input-group>
               <b-form-input
@@ -165,7 +168,7 @@
         >
           <b-form-group
             :label="$t('edit.metric.output.label')"
-            class="text-primary"
+            label-class="text-primary"
           >
             <b-form-select
               v-model="metric.type"
@@ -189,7 +192,7 @@
           <b-form-group
             :label="$t('edit.metric.fx.label')"
             :description="$t('edit.metric.fx.description')"
-            class="text-primary"
+            label-class="text-primary"
           >
             <b-form-textarea
               v-model="metric.fx"
@@ -199,53 +202,32 @@
         </b-col>
 
         <b-col
-          v-if="true"
           cols="12"
           md="6"
         >
           <b-form-group
-            :label="$t('edit.metric.relative')"
-            class="text-primary"
+            :label="$t('edit.metric.options.label')"
+            label-class="text-primary"
           >
-            <c-input-checkbox
-              :value="!!metric.relativeValue"
-              switch
-              :labels="checkboxLabel"
-              @change="$set(metric,'relativeValue', $event)"
-            />
-          </b-form-group>
-        </b-col>
+            <b-form-checkbox
+              v-if="hasRelativeDisplay(metric)"
+              v-model="metric.relativeValue"
+            >
+              {{ $t('edit.metric.relative') }}
+            </b-form-checkbox>
 
-        <b-col
-          v-if="metric.type === 'line'"
-          cols="12"
-          md="6"
-        >
-          <b-form-group
-            :label="$t('edit.metric.fillArea')"
-            class="text-primary"
-          >
-            <c-input-checkbox
+            <b-form-checkbox
+              v-if="metric.type === 'line'"
               v-model="metric.fill"
-              switch
-              :labels="checkboxLabel"
-            />
-          </b-form-group>
-        </b-col>
+            >
+              {{ $t('edit.metric.fillArea') }}
+            </b-form-checkbox>
 
-        <b-col
-          cols="12"
-          md="6"
-        >
-          <b-form-group
-            :label="$t('edit.metric.fixTooltips')"
-            class="text-primary"
-          >
-            <c-input-checkbox
+            <b-form-checkbox
               v-model="metric.fixTooltips"
-              switch
-              :labels="checkboxLabel"
-            />
+            >
+              {{ $t('edit.metric.fixTooltips') }}
+            </b-form-checkbox>
           </b-form-group>
         </b-col>
       </b-row>
@@ -267,7 +249,7 @@
           >
             <b-form-group
               :label="$t('edit.additionalConfig.legend.orientation.label')"
-              class="text-primary"
+              label-class="text-primary"
             >
               <b-form-select
                 v-model="report.legend.orientation"
@@ -281,12 +263,13 @@
             md="6"
           >
             <b-form-group
-              :label="$t('edit.additionalConfig.legend.hide')"
-              class="text-primary"
+              :label="$t('edit.additionalConfig.legend.show')"
+              label-class="text-primary"
             >
               <c-input-checkbox
                 :value="!!report.legend.isHidden"
                 switch
+                invert
                 :labels="checkboxLabel"
                 @input="$set(report.legend,'isHidden', $event)"
               />
@@ -301,7 +284,7 @@
           >
             <b-form-group
               :label="$t('edit.additionalConfig.legend.align.label')"
-              class="text-primary"
+              label-class="text-primary"
             >
               <b-form-select
                 v-model="report.legend.align"
@@ -316,8 +299,8 @@
             md="6"
           >
             <b-form-group
-              :label="'Options'"
-              class="text-primary"
+              :label="$t('edit.additionalConfig.legend.options.label')"
+              label-class="text-primary"
             >
               <b-form-checkbox
                 v-model="report.legend.isScrollable"
@@ -333,117 +316,132 @@
               </b-form-checkbox>
             </b-form-group>
           </b-col>
-
-          <b-row
-            v-if="true"
-            class="px-3 pt-3"
-          >
-            <h6
-              class="text-secondary px-3"
-            >{{ $t('edit.additionalConfig.legend.valueRange') }}</h6>
-            <b-col
-              cols="12"
-              md="6"
-            >
-              <b-form-group
-                :label="$t('edit.additionalConfig.legend.position.top')"
-                class="text-primary"
-              >
-                <b-input
-                  v-model="report.legend.position.top"
-                />
-              </b-form-group>
-            </b-col>
-
-            <b-col
-              cols="12"
-              md="6"
-            >
-              <b-form-group
-                :label="$t('edit.additionalConfig.legend.position.right')"
-                class="text-primary"
-              >
-                <b-input
-                  v-model="report.legend.position.right"
-                />
-              </b-form-group>
-            </b-col>
-
-            <b-col
-              cols="12"
-              md="6"
-            >
-              <b-form-group
-                :label="$t('edit.additionalConfig.legend.position.bottom')"
-                class="text-primary"
-              >
-                <b-input
-                  v-model="report.legend.position.bottom"
-                />
-              </b-form-group>
-            </b-col>
-
-            <b-col
-              cols="12"
-              md="6"
-            >
-              <b-form-group
-                :label="$t('edit.additionalConfig.legend.position.left')"
-                class="text-primary"
-              >
-                <b-input
-                  v-model="report.legend.position.left"
-                />
-              </b-form-group>
-            </b-col>
-          </b-row>
         </b-row>
-      </div>
-
-      <template v-if="!hasAxis">
-        <hr>
-        <div class="px-3 text-primary">
-          <h5 class="mb-3">
-            {{ $t('edit.additionalConfig.tooltip.label') }}
-          </h5>
-
-          <b-form-group
-            :label="$t('edit.additionalConfig.tooltip.formatting.label')"
-            :description="$t('edit.additionalConfig.tooltip.formatting.description')"
-          >
-            <b-input
-              v-model="report.tooltip.formatting"
-              :placeholder="$t('edit.additionalConfig.tooltip.formatting.placeholder')"
-            />
-          </b-form-group>
-
-          <b-form-group
-            :label="$t('edit.additionalConfig.tooltip.labelNextToChartPartition')"
-          >
-            <c-input-checkbox
-              v-model="report.tooltip.labelsNextToPartition"
-              switch
-              :labels="checkboxLabel"
-            />
-          </b-form-group>
-        </div>
-      </template>
-
-      <hr>
-      <div class="px-3">
-        <h5 class="mb-3">
-          {{ $t('edit.additionalConfig.offset.label') }}
-        </h5>
 
         <b-row
-          class="text-primary"
+          v-if="!report.legend.position.isDefault"
         >
+          <b-col
+            cols="12"
+            md="6"
+          >
+            <b-form-group
+              :label="$t('edit.additionalConfig.legend.position.top')"
+              label-class="text-primary"
+            >
+              <b-input
+                v-model="report.legend.position.top"
+              />
+            </b-form-group>
+          </b-col>
+
+          <b-col
+            cols="12"
+            md="6"
+          >
+            <b-form-group
+              :label="$t('edit.additionalConfig.legend.position.right')"
+              label-class="text-primary"
+            >
+              <b-input
+                v-model="report.legend.position.right"
+              />
+            </b-form-group>
+          </b-col>
+
+          <b-col
+            cols="12"
+            md="6"
+          >
+            <b-form-group
+              :label="$t('edit.additionalConfig.legend.position.bottom')"
+              label-class="text-primary"
+            >
+              <b-input
+                v-model="report.legend.position.bottom"
+              />
+            </b-form-group>
+          </b-col>
+
+          <b-col
+            cols="12"
+            md="6"
+          >
+            <b-form-group
+              :label="$t('edit.additionalConfig.legend.position.left')"
+              label-class="text-primary"
+            >
+              <b-input
+                v-model="report.legend.position.left"
+              />
+            </b-form-group>
+          </b-col>
+
+          <b-col cols="12">
+            <small class="text-muted">
+              {{ $t('edit.additionalConfig.legend.valueRange') }}
+            </small>
+          </b-col>
+        </b-row>
+      </div>
+
+      <template v-if="!hasAxis">
+        <hr>
+        <div class="px-3">
+          <h5 class="mb-3">
+            {{ $t('edit.additionalConfig.tooltip.label') }}
+          </h5>
+
+          <b-row>
+            <b-col
+              cols="12"
+              md="6"
+            >
+              <b-form-group
+                :label="$t('edit.additionalConfig.tooltip.formatting.label')"
+                :description="$t('edit.additionalConfig.tooltip.formatting.description')"
+                label-class="text-primary"
+              >
+                <b-input
+                  v-model="report.tooltip.formatting"
+                  :placeholder="$t('edit.additionalConfig.tooltip.formatting.placeholder')"
+                />
+              </b-form-group>
+            </b-col>
+            <b-col
+              cols="12"
+              md="6"
+            >
+              <b-form-group
+                :label="$t('edit.additionalConfig.tooltip.labelNextToChart')"
+                label-class="text-primary"
+              >
+                <c-input-checkbox
+                  :value="!!report.tooltip.labelsNextToPartition"
+                  switch
+                  :labels="checkboxLabel"
+                  @input="$set(report.tooltip, 'labelsNextToPartition', $event)"
+                />
+              </b-form-group>
+            </b-col>
+          </b-row>
+        </div>
+      </template>
+
+      <hr>
+      <div class="px-3 mb-2">
+        <h5 class="mb-3">
+          {{ $t('edit.additionalConfig.offset.label') }}
+        </h5>
+
+        <b-row>
           <b-col
             cols="12"
             md="6"
           >
             <b-form-group
               :label="$t('edit.additionalConfig.offset.default')"
+              label-class="text-primary"
             >
               <c-input-checkbox
                 v-model="report.offset.isDefault"
@@ -457,7 +455,6 @@
 
         <b-row
           v-if="!report.offset.isDefault"
-          class="text-primary"
         >
           <b-col
             cols="12"
@@ -465,6 +462,7 @@
           >
             <b-form-group
               :label="$t('edit.additionalConfig.offset.position.top')"
+              label-class="text-primary"
             >
               <b-input
                 v-model="report.offset.top"
@@ -478,6 +476,7 @@
           >
             <b-form-group
               :label="$t('edit.additionalConfig.offset.position.right')"
+              label-class="text-primary"
             >
               <b-input
                 v-model="report.offset.right"
@@ -491,6 +490,7 @@
           >
             <b-form-group
               :label="$t('edit.additionalConfig.offset.position.bottom')"
+              label-class="text-primary"
             >
               <b-input
                 v-model="report.offset.bottom"
@@ -504,13 +504,19 @@
           >
             <b-form-group
               :label="$t('edit.additionalConfig.offset.position.left')"
-              :description="$t('edit.additionalConfig.offset.valueRange')"
+              label-class="text-primary"
             >
               <b-input
                 v-model="report.offset.left"
               />
             </b-form-group>
           </b-col>
+
+          <b-col cols="12">
+            <small class="text-muted">
+              {{ $t('edit.additionalConfig.offset.valueRange') }}
+            </small>
+          </b-col>
         </b-row>
       </div>
     </template>
diff --git a/client/web/compose/src/components/Chart/Report/ReportEdit.vue b/client/web/compose/src/components/Chart/Report/ReportEdit.vue
index f3761b0e0..f57a99c40 100644
--- a/client/web/compose/src/components/Chart/Report/ReportEdit.vue
+++ b/client/web/compose/src/components/Chart/Report/ReportEdit.vue
@@ -12,10 +12,10 @@
         <b-col
           cols="12"
           md="6"
-          class="text-primary"
         >
           <b-form-group
             :label="$t('edit.module.label')"
+            label-class="text-primary"
           >
             <b-form-select
               v-model="moduleID"
@@ -38,10 +38,10 @@
           v-if="!!module"
           cols="12"
           md="6"
-          class="text-primary"
         >
           <b-form-group
-            :label="$t('edit.filter.label')"
+            :label="$t('edit.filter.preset')"
+            label-class="text-primary"
           >
             <b-form-select
               v-model="report.filter"
@@ -59,26 +59,27 @@
         <!-- Configure report filters -->
         <b-col
           v-if="!!module"
-          class="mt-1 text-primary"
           cols="12"
+          class="mt-1"
         >
           <b-form-group
             :label="$t('edit.filter.label')"
+            label-class="text-primary"
           >
             <b-form-textarea
               v-model="report.filter"
               :placeholder="$t('edit.filter.placeholder')"
             />
-            <b-form-text>
-              <i18next
-                path="edit.filter.footnote"
-                tag="label"
-              >
-                <code>${recordID}</code>
-                <code>${ownerID}</code>
-                <code>${userID}</code>
-              </i18next>
-            </b-form-text>
+
+            <i18next
+              path="edit.filter.footnote"
+              tag="small"
+              class="text-muted"
+            >
+              <code>${recordID}</code>
+              <code>${ownerID}</code>
+              <code>${userID}</code>
+            </i18next>
           </b-form-group>
         </b-col>
       </b-row>
@@ -99,16 +100,14 @@
         </h5>
 
         <template v-if="usesDimensionsField">
-          <b-row
-            class="text-primary"
-          >
+          <b-row>
             <b-col
               cols="12"
               md="6"
             >
               <b-form-group
                 :label="$t('edit.dimension.fieldLabel')"
-                class="text-primary"
+                label-class="text-primary"
               >
                 <b-form-select
                   v-model="d.field"
@@ -132,7 +131,7 @@
             >
               <b-form-group
                 :label="$t('edit.dimension.function.label')"
-                class="text-primary"
+                label-class="text-primary"
               >
                 <b-form-select
                   v-model="d.modifier"
@@ -160,7 +159,7 @@
                 <b-form-group
                   :label="$t('edit.dimension.rotate.label')"
                   :description="$t('edit.dimension.rotate.description')"
-                  class="text-primary"
+                  label-class="text-primary"
                 >
                   <b-input
                     v-model="d.rotateLabel"
@@ -175,15 +174,14 @@
                 md="6"
               >
                 <b-form-group
-                  :label="$t('edit.dimension.skipMissingValues')"
-                  class="text-primary"
+                  :label="$t('edit.dimension.options.label')"
+                  label-class="text-primary"
                 >
-                  <c-input-checkbox
-                    :value="!!d.skipMissing"
-                    switch
-                    :labels="checkboxLabel"
-                    @change="d.skipMissing = $event"
-                  />
+                  <b-form-checkbox
+                    v-model="d.skipMissing"
+                  >
+                    {{ $t('edit.dimension.skipMissingValues') }}
+                  </b-form-checkbox>
                 </b-form-group>
               </b-col>
 
@@ -195,7 +193,7 @@
                 <b-form-group
                   :label="$t('edit.dimension.defaultValueLabel')"
                   :description="$t('edit.dimension.defaultValueFootnote')"
-                  class="text-primary"
+                  label-class="text-primary"
                 >
                   <b-form-input
                     v-model="d.default"
@@ -237,30 +235,39 @@
       <draggable
         class="metrics mb-3"
         :list.sync="metrics"
-        handle=".metric-handle"
+        handle=".grab"
         :group="`metrics_${moduleID}`"
       >
-        <fieldset
+        <div
           v-for="(m,i) in metrics"
           :key="i"
-          class="main-fieldset mb-3"
+          class="rounded border border-light p-3 mb-3"
+          style="background-color: #F9FAFB;"
         >
           <h5
             v-if="metrics.length > 1"
             class="d-flex align-items-center mb-3"
           >
-            <font-awesome-icon
-              class="grab metric-handle align-baseline text-secondary mr-2"
-              :icon="['fas', 'grip-vertical']"
-            />
             {{ $t('edit.metric.label') }} {{ i + 1 }}
-            <b-button
-              variant="link"
-              class="text-danger align-baseline"
-              @click.prevent="removeMetric(i)"
-            >
-              <font-awesome-icon :icon="['far', 'trash-alt']" />
-            </b-button>
+
+            <div class="d-flex align-items-center ml-auto">
+              <c-input-confirm
+                class="mr-2"
+                @confirmed="removeMetric(i)"
+              />
+
+              <b-button
+                variant="link"
+                size="sm"
+                :disabled="true"
+                class="ml-auto px-0"
+              >
+                <font-awesome-icon
+                  class="grab text-secondary"
+                  :icon="['fas', 'bars']"
+                />
+              </b-button>
+            </div>
           </h5>
 
           <b-row>
@@ -270,7 +277,7 @@
             >
               <b-form-group
                 :label="$t('edit.metric.fieldLabel')"
-                class="text-primary"
+                label-class="text-primary"
               >
                 <b-form-select
                   v-model="m.field"
@@ -294,7 +301,7 @@
             >
               <b-form-group
                 :label="$t('edit.metric.function.label')"
-                class="text-primary"
+                label-class="text-primary"
               >
                 <b-form-select
                   v-model="m.aggregate"
@@ -317,9 +324,10 @@
             name="metric-options"
             :metric="m"
           />
-        </fieldset>
+        </div>
       </draggable>
     </div>
+
     <hr v-if="!!module && hasAxis">
 
     <template v-if="hasAxis">
@@ -327,8 +335,8 @@
         name="y-axis"
         :report="editReport"
       />
+      <hr>
     </template>
-    <hr v-if="hasAxis">
 
     <slot
       name="additional-config"
diff --git a/client/web/compose/src/views/Admin/Charts/Edit.vue b/client/web/compose/src/views/Admin/Charts/Edit.vue
index e72c1710f..57caca1c7 100644
--- a/client/web/compose/src/views/Admin/Charts/Edit.vue
+++ b/client/web/compose/src/views/Admin/Charts/Edit.vue
@@ -34,224 +34,215 @@
                 class="float-right"
               />
             </b-card-header>
-            <b-container
-              fluid
-              class="p-0"
-            >
-              <b-row>
-                <b-col
-                  md="7"
-                  sm="12"
+
+            <b-row no-gutters>
+              <b-col
+                md="7"
+                sm="12"
+                class="border-right"
+              >
+                <div
+                  class="pt-3 px-3"
                 >
-                  <div
-                    class="pt-3 px-3"
+                  <h5>
+                    {{ $t('generalSettings') }}
+                  </h5>
+                  <b-row
+                    v-if="modules"
                   >
-                    <h5>
-                      {{ $t('generalSettings') }}
-                    </h5>
-                    <b-row
-                      v-if="modules"
+                    <b-col
+                      cols="12"
+                      md="6"
                     >
-                      <b-col
-                        cols="12"
-                        md="6"
+                      <b-form-group
+                        :label="$t('name')"
+                        class="text-primary"
                       >
-                        <b-form-group
-                          :label="$t('name')"
-                          class="text-primary"
-                        >
-                          <b-form-input
-                            v-model="chart.name"
-                            :state="nameState"
-                          />
-                        </b-form-group>
-                      </b-col>
+                        <b-form-input
+                          v-model="chart.name"
+                          :state="nameState"
+                        />
+                      </b-form-group>
+                    </b-col>
 
-                      <b-col
-                        cols="12"
-                        md="6"
+                    <b-col
+                      cols="12"
+                      md="6"
+                    >
+                      <b-form-group
+                        :label="$t('handle')"
+                        class="text-primary"
                       >
-                        <b-form-group
-                          :label="$t('handle')"
-                          class="text-primary"
-                        >
-                          <b-form-input
-                            v-model="chart.handle"
-                            :placeholder="$t('general.placeholder.handle')"
-                            :state="handleState"
-                            class="mb-1"
-                          />
-                          <b-form-invalid-feedback :state="handleState">
-                            {{ $t('general.placeholder.invalid-handle-characters') }}
-                          </b-form-invalid-feedback>
-                        </b-form-group>
-                      </b-col>
+                        <b-form-input
+                          v-model="chart.handle"
+                          :placeholder="$t('general.placeholder.handle')"
+                          :state="handleState"
+                          class="mb-1"
+                        />
+                        <b-form-invalid-feedback :state="handleState">
+                          {{ $t('general.placeholder.invalid-handle-characters') }}
+                        </b-form-invalid-feedback>
+                      </b-form-group>
+                    </b-col>
 
-                      <b-col
-                        cols="12"
-                        md="6"
+                    <b-col
+                      cols="12"
+                      md="6"
+                    >
+                      <b-form-group
+                        :label="$t('colorScheme.label')"
+                        label-class="text-primary"
                       >
-                        <div
-                          :label="$t('colorScheme.label')"
+                        <vue-select
+                          v-model="chart.config.colorScheme"
+                          :options="colorSchemes"
+                          :reduce="cs => cs.value"
+                          label="label"
+                          option-text="label"
+                          option-value="value"
+                          :placeholder="$t('colorScheme.placeholder')"
+                          :calculate-position="calculateDropdownPosition"
+                          class="color-selector bg-white"
                         >
-                          <vue-select
-                            v-model="chart.config.colorScheme"
-                            :options="colorSchemes"
-                            :get-option-key="getOptionKey"
-                            :reduce="cs => cs.value"
-                            label="label"
-                            option-text="label"
-                            option-value="value"
-                            :placeholder="$t('colorScheme.placeholder')"
-                            :calculate-position="calculateDropdownPosition"
-                            class="color-selector bg-white"
-                          >
-                            <template #option="option">
-                              <p
-                                class="mb-1"
-                              >
-                                {{ option.label }}
-                              </p>
-                              <div
-                                v-for="(color, index) in option.colors"
-                                :key="`${option.value}-${index}`"
-                                :style="`background: ${color};`"
-                                class="d-inline-block color-box mr-1 mb-1"
-                              />
-                            </template>
-                          </vue-select>
-
-                          <template
-                            v-if="currentColorScheme"
-                          >
+                          <template #option="option">
+                            <p
+                              class="mb-1"
+                            >
+                              {{ option.label }}
+                            </p>
                             <div
-                              v-for="(color, index) in currentColorScheme.colors"
-                              :key="`${currentColorScheme.value}-${index}`"
+                              v-for="(color, index) in option.colors"
+                              :key="`${option.value}-${index}`"
                               :style="`background: ${color};`"
-                              class="d-inline-block color-box mr-1"
+                              class="d-inline-block color-box mr-1 mb-1"
                             />
                           </template>
-                        </div>
-                      </b-col>
+                        </vue-select>
 
-                      <b-col
-                        cols="12"
-                        md="6"
-                        class="mt-2 mt-md-0"
-                      >
-                        <b-form-group
-                          :label="$t('edit.animation.enabled')"
-                          class="text-primary"
+                        <template
+                          v-if="currentColorScheme"
                         >
-                          <c-input-checkbox
-                            v-model="chart.config.noAnimation"
-                            :labels="checkboxLabel"
-                            switch
-                            invert
+                          <div
+                            v-for="(color, index) in currentColorScheme.colors"
+                            :key="`${currentColorScheme.value}-${index}`"
+                            :style="`background: ${color};`"
+                            class="d-inline-block color-box mr-1"
                           />
-                        </b-form-group>
-                      </b-col>
-                    </b-row>
-                  </div>
-                  <hr v-if="modules">
+                        </template>
+                      </b-form-group>
+                    </b-col>
 
-                  <!-- Some charts support multiple reports -->
-                  <fieldset
-                    v-if="supportsMultipleReports"
-                    class="form-group"
-                  >
-                    <b-form-group class=" px-3">
-                      <h5 class="d-inline-block">
-                        {{ $t('configure.reportsLabel') }}
-                      </h5>
-
-                      <b-btn
-                        v-if="reportsValid"
-                        class="float-right p-0"
-                        variant="link"
-                        @click="onAddReport"
-                      >
-                        + {{ $t('general.label.add') }}
-                      </b-btn>
-
-                      <div>
-                        <draggable
-                          v-model="reports"
-                          handle=".handle"
-                          tag="tbody"
-                          class="w-100 d-inline-block"
-                        >
-                          <report-item
-                            v-for="(r, i) in reports"
-                            :key="i"
-                            :report="r"
-                            :fixed="reports.length === 1"
-                            @edit="onEditReport(i)"
-                            @remove="onRemoveReport(i)"
-                          >
-                            <template #report-label>
-                              <template v-if="r.moduleID">
-                                {{ moduleName(r.moduleID) }}
-                              </template>
-
-                              <template v-else>
-                                {{ $t('edit.unconfiguredReport') }}
-                              </template>
-                            </template>
-                          </report-item>
-                        </draggable>
-                      </div>
-                    </b-form-group>
-                  </fieldset>
-
-                  <!-- General report editing component -->
-                  <component
-                    :is="reportEditor"
-                    v-if="editReport"
-                    :report.sync="editReport"
-                    :chart="chart"
-                    :modules="modules"
-                    :dimension-field-kind="['Select']"
-                    :supported-metrics="1"
-                  />
-                </b-col>
-
-                <b-col
-                  md="5"
-                  sm="12"
-                >
-                  <div
-                    class="d-flex flex-column position-sticky"
-                    style="top: 0;"
-                  >
-                    <div
-                      class="chart-preview mt-2"
+                    <b-col
+                      cols="12"
+                      md="6"
+                      class="mt-2 mt-md-0"
                     >
-                      <div
-                        class="d-flex justify-content-end pr-3">
-                        <b-button
-                          :title="$t('edit.loadData')"
-                          variant="outline"
-                          size="lg"
-                          class="d-flex align-items-center text-primary"
-                          @click.prevent="update"
-                        >
-                          <font-awesome-icon :icon="['fa', 'sync']" />
-                        </b-button>
-                      </div>
+                      <b-form-group
+                        :label="$t('edit.animation.label')"
+                        class="text-primary"
+                      >
+                        <c-input-checkbox
+                          v-model="chart.config.noAnimation"
+                          :labels="checkboxLabel"
+                          switch
+                          invert
+                        />
+                      </b-form-group>
+                    </b-col>
+                  </b-row>
+                </div>
+                <hr v-if="modules">
 
-                      <chart-component
-                        ref="chart"
-                        :chart="chart"
-                        :reporter="reporter"
-                        style="min-height: 400px;"
-                        @updated="onUpdated"
-                      />
+                <!-- Some charts support multiple reports -->
+                <!-- <fieldset
+                  v-if="supportsMultipleReports"
+                  class="form-group"
+                >
+                  <b-form-group class=" px-3">
+                    <h5 class="d-inline-block">
+                      {{ $t('configure.reportsLabel') }}
+                    </h5>
+
+                    <b-btn
+                      v-if="reportsValid"
+                      class="float-right p-0"
+                      variant="link"
+                      @click="onAddReport"
+                    >
+                      + {{ $t('general.label.add') }}
+                    </b-btn>
+
+                    <div>
+                      <draggable
+                        v-model="reports"
+                        handle=".handle"
+                        tag="tbody"
+                        class="w-100 d-inline-block"
+                      >
+                        <report-item
+                          v-for="(r, i) in reports"
+                          :key="i"
+                          :report="r"
+                          :fixed="reports.length === 1"
+                          @edit="onEditReport(i)"
+                          @remove="onRemoveReport(i)"
+                        >
+                          <template #report-label>
+                            <template v-if="r.moduleID">
+                              {{ moduleName(r.moduleID) }}
+                            </template>
+
+                            <template v-else>
+                              {{ $t('edit.unconfiguredReport') }}
+                            </template>
+                          </template>
+                        </report-item>
+                      </draggable>
                     </div>
-                  </div>
-                </b-col>
-              </b-row>
-            </b-container>
+                  </b-form-group>
+                </fieldset> -->
+
+                <!-- General report editing component -->
+                <component
+                  :is="reportEditor"
+                  v-if="editReport"
+                  :report.sync="editReport"
+                  :chart="chart"
+                  :modules="modules"
+                  :dimension-field-kind="['Select']"
+                  :supported-metrics="1"
+                />
+              </b-col>
+
+              <b-col
+                md="5"
+                sm="12"
+              >
+                <div
+                  class="d-flex flex-column position-sticky"
+                  style="top: 0;"
+                >
+                  <b-button
+                    :title="$t('edit.loadData')"
+                    :disabled="processing || !reportsValid"
+                    variant="outline-light"
+                    size="lg"
+                    class="d-flex align-items-center text-primary ml-auto border-0 mt-2 mr-2"
+                    @click.prevent="update"
+                  >
+                    <font-awesome-icon :icon="['fa', 'sync']" />
+                  </b-button>
+
+                  <chart-component
+                    ref="chart"
+                    :chart="chart"
+                    :reporter="reporter"
+                    style="min-height: 400px;"
+                    @updated="onUpdated"
+                  />
+                </div>
+              </b-col>
+            </b-row>
           </b-card>
         </b-col>
       </b-row>
@@ -607,8 +598,8 @@ export default {
 }
 
 .color-box {
-  width: 28px;
-  height: 12px;
+  width: 18px;
+  height: 8px;
 }
 
 .color-selector {
diff --git a/locale/en/corteza-webapp-compose/chart.yaml b/locale/en/corteza-webapp-compose/chart.yaml
index 7d605864d..2125d23ef 100644
--- a/locale/en/corteza-webapp-compose/chart.yaml
+++ b/locale/en/corteza-webapp-compose/chart.yaml
@@ -14,12 +14,13 @@ general:
     invalid-handle-characters: Should be at least 2 characters long. Can contain only letters, numbers, dashes, underscores and dots. Must end with letter or number
 edit:
   animation:
+    label: Animation
     enabled: Animation enabled
   dimension:
     calculateLabelCount: Calculate how many labels can be shown
     defaultValueFootnote: Use this value for missing dimension values
     defaultValueLabel: Default value
-    fieldLabel: Field
+    fieldLabel: Field *
     fieldPlaceholder: Select a dimension field
     function:
       date: DATE
@@ -33,6 +34,8 @@ edit:
     gaugeSteps: Steps
     label: Dimensions
     skipMissingValues: Skip missing values
+    options:
+      label: Options
     optionsPicker:
       searchPlaceholder: Type here to search among select options
       availableItems: Available options
@@ -45,10 +48,11 @@ edit:
       description: Labels can be rotated from -90 to 90 degrees.
   filter:
     customize: Customize filter
-    label: Filters
+    label: Filter
+    preset: Preset filters
     footnote: Simplified SQL condition (WHERE ...) syntax is supported. Variables like {{0}}, {{1}} and {{2}} are evaluated (when available)
     placeholder: field1 = 1 AND field2 = 232
-    noFilter: Select a predefined filter or make a custom one
+    noFilter: Select a filter or make a custom one
     recordsCreatedLastMonth: Records created last month
     recordsCreatedLastQuarter: Records created last quarter
     recordsCreatedLastYear: Records created last year
@@ -58,10 +62,12 @@ edit:
   loadData: Load data
   metric:
     add: Add metric
-    fieldLabel: Field
+    fieldLabel: Field *
     fieldPlaceholder: Select metric field
     fillArea: Fill area below the line
     fixTooltips: Always show tooltips
+    options:
+      label: Options
     function:
       avg: AVG
       label: Function
@@ -94,7 +100,7 @@ edit:
     output:
       bar: Bar
       doughnut: Doughnut
-      label: Output
+      label: Chart type *
       line: Line
       pie: Pie
       placeholder: Select metric output
@@ -103,7 +109,7 @@ edit:
     cumulative: Cumulative
     title: Metrics
   module:
-    label: Module
+    label: Module *
     placeholder: Pick a module
     title: Data Source
   title: Chart builder
@@ -131,7 +137,7 @@ edit:
   additionalConfig:
     legend:
       label: Legend
-      hide: Hide legend
+      show: Show legend
       orientation:
         label: Orientation
         horizontal: Horizontal
@@ -149,9 +155,11 @@ edit:
         bottom: Bottom
         left: Left
       valueRange: Values can be set as pixels 20 or as percentages 20%
+      options:
+        label: Options
     tooltip:
       label: Tooltip
-      labelNextToChartPartition: Show labels next to chart partition
+      labelNextToChart: Show labels next to chart
       formatting:
         label: Formatting
         description: '{a} - metrics label, {b} - dimension value, {c} - metric value, {d} - metric value percentage'