From 1303c4c717bdd63e19de3adb2da87474171294a5 Mon Sep 17 00:00:00 2001
From: Emmy Leke <emmy.leke@planetcrust.com>
Date: Fri, 31 Mar 2023 16:42:41 +0100
Subject: [PATCH] Update chart builder layout

---
 .../components/Chart/Report/FunnelChart.vue   |  65 +-
 .../components/Chart/Report/GaugeChart.vue    |  50 +-
 .../components/Chart/Report/GenericChart.vue  | 731 ++++++++++--------
 .../components/Chart/Report/ReportEdit.vue    | 405 ++++++----
 .../src/components/Chart/Report/base.vue      |   9 +
 .../PageBlocks/RecordListConfigurator.vue     |   3 +-
 client/web/compose/src/components/index.js    |   1 +
 .../compose/src/views/Admin/Charts/Edit.vue   | 257 +++---
 .../src/components/input/CInputCheckbox.vue   |   2 +-
 locale/en/corteza-webapp-compose/chart.yaml   |   4 +
 10 files changed, 917 insertions(+), 610 deletions(-)

diff --git a/client/web/compose/src/components/Chart/Report/FunnelChart.vue b/client/web/compose/src/components/Chart/Report/FunnelChart.vue
index 727be3d73..abe490cd5 100644
--- a/client/web/compose/src/components/Chart/Report/FunnelChart.vue
+++ b/client/web/compose/src/components/Chart/Report/FunnelChart.vue
@@ -20,33 +20,60 @@
           noItemsFound: $t('edit.dimension.optionsPicker.noItemsFound'),
         }"
         class="d-flex flex-column"
-        style="max-height: 45vh;"
+        style="height: 100% !important;"
         @update:value="setOptions(index, field, $event)"
       />
     </template>
 
     <template #metric-options="{ metric }">
-      <b-form-group
-        horizontal
-        :label-cols="3"
-        breakpoint="md"
+      <b-row
+        class="text-primary"
       >
-        <b-form-checkbox
-          v-model="metric.cumulative"
+        <b-col
+          cols="12"
+          md="6"
         >
-          {{ $t('edit.metric.cumulative') }}
-        </b-form-checkbox>
-        <b-form-checkbox
-          v-model="metric.relativeValue"
+          <b-form-group
+            :label="$t('edit.metric.cumulative')"
+          >
+            <c-input-checkbox
+              v-model="metric.cumulative"
+              switch
+              :labels="checkboxLabel"
+            />
+          </b-form-group>
+        </b-col>
+
+        <b-col
+          cols="12"
+          md="6"
         >
-          {{ $t('edit.metric.relative') }}
-        </b-form-checkbox>
-        <b-form-checkbox
-          v-model="metric.fixTooltips"
+          <b-form-group
+            :label="$t('edit.metric.relative')"
+          >
+            <c-input-checkbox
+              v-model="metric.relativeValue"
+              switch
+              :labels="checkboxLabel"
+            />
+          </b-form-group>
+        </b-col>
+
+        <b-col
+          cols="12"
+          md="6"
         >
-          {{ $t('edit.metric.fixTooltips') }}
-        </b-form-checkbox>
-      </b-form-group>
+          <b-form-group
+            :label="$t('edit.metric.fixTooltips')"
+          >
+            <c-input-checkbox
+              v-model="metric.fixTooltips"
+              switch
+              :labels="checkboxLabel"
+            />
+          </b-form-group>
+        </b-col>
+      </b-row>
     </template>
   </report-edit>
 </template>
@@ -58,6 +85,8 @@ import { components } from '@cortezaproject/corteza-vue'
 const { CItemPicker } = components
 
 export default {
+  name: 'FunnelChart',
+
   components: {
     ReportEdit,
     CItemPicker,
diff --git a/client/web/compose/src/components/Chart/Report/GaugeChart.vue b/client/web/compose/src/components/Chart/Report/GaugeChart.vue
index 13d9113ac..42e394aec 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')"
-        :label-cols="3"
+        class="text-primary"
       >
         <b-input-group
           v-for="(step, i) in dimension.meta.steps"
@@ -61,23 +61,39 @@
     </template>
 
     <template #metric-options="{ metric }">
-      <b-form-group
-        :label="$t('edit.metric.fx.label')"
-        :description="$t('edit.metric.fx.description')"
+      <b-row
+        class="text-primary"
       >
-        <b-form-textarea
-          v-model="metric.fx"
-          placeholder="n"
-        />
-      </b-form-group>
+        <b-col
+          cols="12"
+          md="6"
+        >
+          <b-form-group
+            :label="$t('edit.metric.fx.label')"
+            :description="$t('edit.metric.fx.description')"
+          >
+            <b-form-textarea
+              v-model="metric.fx"
+              placeholder="n"
+            />
+          </b-form-group>
+        </b-col>
 
-      <b-form-checkbox
-        v-model="metric.fixTooltips"
-        :value="true"
-        :unchecked-value="false"
-      >
-        {{ $t('edit.metric.fixTooltips') }}
-      </b-form-checkbox>
+        <b-col
+          cols="12"
+          md="6"
+        >
+          <b-form-group
+            :label="$t('edit.metric.fixTooltips')"
+          >
+            <c-input-checkbox
+              v-model="metric.fixTooltips"
+              switch
+              :labels="checkboxLabel"
+            />
+          </b-form-group>
+        </b-col>
+      </b-row>
     </template>
   </report-edit>
 </template>
@@ -89,6 +105,8 @@ import { compose, NoID } from '@cortezaproject/corteza-js'
 import base from './base'
 
 export default {
+  name: 'GaugeChart',
+
   i18nOptions: {
     namespaces: 'chart',
   },
diff --git a/client/web/compose/src/components/Chart/Report/GenericChart.vue b/client/web/compose/src/components/Chart/Report/GenericChart.vue
index d662e589f..1df4a7c85 100644
--- a/client/web/compose/src/components/Chart/Report/GenericChart.vue
+++ b/client/web/compose/src/components/Chart/Report/GenericChart.vue
@@ -4,404 +4,515 @@
     :modules="modules"
   >
     <template #y-axis="{ report }">
-      <h4 class="mb-0">
-        {{ $t('edit.yAxis.label') }}
-      </h4>
+      <div
+        class="px-3"
+      >
+        <h5 class="mb-3">
+          {{ $t('edit.yAxis.label') }}
+        </h5>
 
-      <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"
-          />
-          <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"
-        class="mt-1"
-        breakpoint="md"
-        :label="$t('edit.yAxis.minLabel')"
-      >
-        <b-form-input
-          v-model="report.yAxis.min"
-          type="number"
-          :placeholder="$t('edit.yAxis.minPlaceholder')"
-        />
-      </b-form-group>
-      <b-form-group
-        horizontal
-        :label-cols="3"
-        class="mt-1"
-        breakpoint="md"
-        :label="$t('edit.yAxis.maxLabel')"
-      >
-        <b-form-input
-          v-model="report.yAxis.max"
-          type="number"
-          :placeholder="$t('edit.yAxis.maxPlaceholder')"
-        />
-      </b-form-group>
-
-      <b-form-group
-        horizontal
-        breakpoint="md"
-        :label-cols="3"
-        :label="$t('edit.yAxis.rotate.label')"
-        :description="$t('edit.yAxis.rotate.description')"
-      >
-        <b-input
-          v-model="report.yAxis.rotateLabel"
-          type="number"
-        />
-      </b-form-group>
-
-      <b-form-group
-        horizontal
-        :label-cols="3"
-        breakpoint="md"
-      >
-        <b-form-checkbox
-          v-model="report.yAxis.axisType"
-          value="logarithmic"
-          unchecked-value="linear"
+        <b-row
+          class="text-primary"
         >
-          {{ $t('edit.yAxis.logarithmicScale') }}
-        </b-form-checkbox>
+          <b-col
+            cols="12"
+            md="6"
+          >
+            <b-form-group
+              :label="$t('edit.yAxis.labelLabel')"
+            >
+              <b-input-group>
+                <b-form-input
+                  v-model="report.yAxis.label"
+                />
+                <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-col>
 
-        <b-form-checkbox
-          v-model="report.yAxis.axisPosition"
-          value="right"
-          unchecked-value="left"
-        >
-          {{ $t('edit.yAxis.axisOnRight') }}
-        </b-form-checkbox>
+          <b-col
+            cols="12"
+            md="6"
+          >
+            <b-form-group
+              :label="$t('edit.yAxis.labelPosition.label')"
+            >
+              <b-form-select
+                v-model="report.yAxis.labelPosition"
+                :options="axisLabelPositions"
+              />
+            </b-form-group>
+          </b-col>
 
-        <b-form-checkbox
-          v-model="report.yAxis.beginAtZero"
-        >
-          {{ $t('edit.yAxis.axisScaleFromZero') }}
-        </b-form-checkbox>
-      </b-form-group>
+          <b-col
+            cols="12"
+            md="6"
+          >
+            <b-form-group
+              :label="$t('edit.yAxis.minLabel')"
+            >
+              <b-form-input
+                v-model="report.yAxis.min"
+                type="number"
+                :placeholder="$t('edit.yAxis.minPlaceholder')"
+              />
+            </b-form-group>
+          </b-col>
+
+          <b-col
+            cols="12"
+            md="6"
+          >
+            <b-form-group
+              :label="$t('edit.yAxis.maxLabel')"
+            >
+              <b-form-input
+                v-model="report.yAxis.max"
+                type="number"
+                :placeholder="$t('edit.yAxis.maxPlaceholder')"
+              />
+            </b-form-group>
+          </b-col>
+
+          <b-col
+            cols="12"
+            md="6"
+          >
+            <b-form-group
+              :label="$t('edit.yAxis.rotate.label')"
+              :description="$t('edit.yAxis.rotate.description')"
+            >
+              <b-input
+                v-model="report.yAxis.rotateLabel"
+                type="number"
+              />
+            </b-form-group>
+          </b-col>
+
+          <b-col
+            cols="12"
+            md="6"
+          >
+            <b-form-group
+              :label="$t('edit.yAxis.options.label')"
+            >
+              <b-form-checkbox
+                v-model="report.yAxis.axisType"
+                value="logarithmic"
+                unchecked-value="linear"
+              >
+                {{ $t('edit.yAxis.logarithmicScale') }}
+              </b-form-checkbox>
+
+              <b-form-checkbox
+                v-model="report.yAxis.axisPosition"
+                value="right"
+                unchecked-value="left"
+              >
+                {{ $t('edit.yAxis.axisOnRight') }}
+              </b-form-checkbox>
+
+              <b-form-checkbox
+                v-model="report.yAxis.beginAtZero"
+              >
+                {{ $t('edit.yAxis.axisScaleFromZero') }}
+              </b-form-checkbox>
+            </b-form-group>
+          </b-col>
+        </b-row>
+      </div>
     </template>
 
     <template #metric-options="{ metric }">
-      <b-form-group
-        v-if="!['pie', 'doughnut'].includes(metric.type)"
-        horizontal
-        :label-cols="3"
-        class="mt-1"
-        breakpoint="md"
-        :label="$t('edit.metric.labelLabel')"
-      >
-        <b-input-group>
-          <b-form-input
-            v-model="metric.label"
-          />
-          <b-input-group-append>
-            <chart-translator
-              :field.sync="metric.label"
-              :chart="chart"
-              :disabled="isNew"
-              :highlight-key="`metrics.${metric.metricID}.label`"
-              button-variant="light"
-            />
-          </b-input-group-append>
-        </b-input-group>
-      </b-form-group>
-
-      <b-form-group
-        horizontal
-        :label-cols="3"
-        breakpoint="md"
-        :label="$t('edit.metric.fx.label')"
-        :description="$t('edit.metric.fx.description')"
-      >
-        <b-form-textarea
-          v-model="metric.fx"
-          placeholder="n"
-        />
-      </b-form-group>
-
-      <b-form-group
-        horizontal
-        :label-cols="3"
-        breakpoint="md"
-        :label="$t('edit.metric.output.label')"
-      >
-        <b-form-select
-          v-model="metric.type"
-          :options="chartTypes"
+      <b-row>
+        <b-col
+          v-if="!['pie', 'doughnut'].includes(metric.type)"
+          cols="12"
+          md="6"
         >
-          <template slot="first">
-            <option
-              :value="undefined"
+          <b-form-group
+            :label="$t('edit.metric.labelLabel')"
+            class="text-primary"
+          >
+            <b-input-group>
+              <b-form-input
+                v-model="metric.label"
+              />
+              <b-input-group-append>
+                <chart-translator
+                  :field.sync="metric.label"
+                  :chart="chart"
+                  :disabled="isNew"
+                  :highlight-key="`metrics.${metric.metricID}.label`"
+                  button-variant="light"
+                />
+              </b-input-group-append>
+            </b-input-group>
+          </b-form-group>
+        </b-col>
+
+        <b-col
+          cols="12"
+          md="6"
+        >
+          <b-form-group
+            :label="$t('edit.metric.output.label')"
+            class="text-primary"
+          >
+            <b-form-select
+              v-model="metric.type"
+              :options="chartTypes"
             >
-              {{ $t('edit.metric.output.placeholder') }}
-            </option>
-          </template>
-        </b-form-select>
-      </b-form-group>
+              <template slot="first">
+                <option
+                  :value="undefined"
+                >
+                  {{ $t('edit.metric.output.placeholder') }}
+                </option>
+              </template>
+            </b-form-select>
+          </b-form-group>
+        </b-col>
 
-      <b-form-group
-        horizontal
-        :label-cols="3"
-        breakpoint="md"
-        label=""
-      >
-        <template v-if="hasRelativeDisplay(metric)">
-          <b-form-checkbox
-            v-model="metric.relativeValue"
-          >
-            {{ $t('edit.metric.relative') }}
-          </b-form-checkbox>
-        </template>
-
-        <template v-if="metric.type === 'line'">
-          <b-form-checkbox
-            v-model="metric.fill"
-          >
-            {{ $t('edit.metric.fillArea') }}
-          </b-form-checkbox>
-        </template>
-        <b-form-checkbox
-          v-model="metric.fixTooltips"
+        <b-col
+          cols="12"
+          md="6"
         >
-          {{ $t('edit.metric.fixTooltips') }}
-        </b-form-checkbox>
-      </b-form-group>
+          <b-form-group
+            :label="$t('edit.metric.fx.label')"
+            :description="$t('edit.metric.fx.description')"
+            class="text-primary"
+          >
+            <b-form-textarea
+              v-model="metric.fx"
+              placeholder="n"
+            />
+          </b-form-group>
+        </b-col>
+
+        <b-col
+          v-if="true"
+          cols="12"
+          md="6"
+        >
+          <b-form-group
+            :label="$t('edit.metric.relative')"
+            class="text-primary"
+          >
+            <c-input-checkbox
+              :value="!!metric.relativeValue"
+              switch
+              :labels="checkboxLabel"
+              @change="$set(metric,'relativeValue', $event)"
+            />
+          </b-form-group>
+        </b-col>
+
+        <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
+              v-model="metric.fill"
+              switch
+              :labels="checkboxLabel"
+            />
+          </b-form-group>
+        </b-col>
+
+        <b-col
+          cols="12"
+          md="6"
+        >
+          <b-form-group
+            :label="$t('edit.metric.fixTooltips')"
+            class="text-primary"
+          >
+            <c-input-checkbox
+              v-model="metric.fixTooltips"
+              switch
+              :labels="checkboxLabel"
+            />
+          </b-form-group>
+        </b-col>
+      </b-row>
     </template>
 
     <template #additional-config="{ hasAxis, report }">
-      <hr>
-      <template>
-        <h4 class="mb-3">
+      <hr v-if="!hasAxis">
+      <div
+        class="px-3"
+      >
+        <h5 class="mb-3">
           {{ $t('edit.additionalConfig.legend.label') }}
-        </h4>
+        </h5>
 
-        <b-form-group
-          horizontal
-          breakpoint="md"
-        >
-          <b-form-checkbox
-            v-model="report.legend.isHidden"
+        <b-row>
+          <b-col
+            cols="12"
+            md="6"
           >
-            {{ $t('edit.additionalConfig.legend.hide') }}
-          </b-form-checkbox>
-
-          <template v-if="!report.legend.isHidden">
             <b-form-group
-              horizontal
-              class="mt-2"
-              breakpoint="md"
-              :label-cols="3"
               :label="$t('edit.additionalConfig.legend.orientation.label')"
+              class="text-primary"
             >
               <b-form-select
                 v-model="report.legend.orientation"
                 :options="orientations"
               />
             </b-form-group>
+          </b-col>
+
+          <b-col
+            cols="12"
+            md="6"
+          >
+            <b-form-group
+              :label="$t('edit.additionalConfig.legend.hide')"
+              class="text-primary"
+            >
+              <c-input-checkbox
+                :value="!!report.legend.isHidden"
+                switch
+                :labels="checkboxLabel"
+                @input="$set(report.legend,'isHidden', $event)"
+              />
+            </b-form-group>
+          </b-col>
+        </b-row>
+
+        <b-row>
+          <b-col
+            cols="12"
+            md="6"
+          >
             <b-form-group
-              horizontal
-              breakpoint="md"
-              :label-cols="3"
               :label="$t('edit.additionalConfig.legend.align.label')"
+              class="text-primary"
             >
               <b-form-select
                 v-model="report.legend.align"
                 :options="alignments"
                 :disabled="!report.legend.position.isDefault"
               />
+            </b-form-group>
+          </b-col>
+
+          <b-col
+            cols="12"
+            md="6"
+          >
+            <b-form-group
+              :label="'Options'"
+              class="text-primary"
+            >
               <b-form-checkbox
                 v-model="report.legend.isScrollable"
-                class="mt-2"
                 :disabled="report.legend.orientation !== 'horizontal'"
               >
                 {{ $t('edit.additionalConfig.legend.scrollable') }}
               </b-form-checkbox>
+
               <b-form-checkbox
                 v-model="report.legend.position.isDefault"
-                class="mt-2"
               >
                 {{ $t('edit.additionalConfig.legend.position.customize') }}
               </b-form-checkbox>
             </b-form-group>
-            <template
-              v-if="!report.legend.position.isDefault"
+          </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
-                horizontal
-                :label-cols="3"
-                breakpoint="md"
                 :label="$t('edit.additionalConfig.legend.position.top')"
-                class="mt-1"
+                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
-                horizontal
-                :label-cols="3"
                 :label="$t('edit.additionalConfig.legend.position.right')"
-                breakpoint="md"
-                class="mt-1"
+                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
-                horizontal
-                :label-cols="3"
                 :label="$t('edit.additionalConfig.legend.position.bottom')"
-                breakpoint="md"
-                class="mt-1"
+                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
-                horizontal
-                breakpoint="md"
-                class="mt-1"
-                :label-cols="3"
                 :label="$t('edit.additionalConfig.legend.position.left')"
-                :description="$t('edit.additionalConfig.legend.valueRange')"
+                class="text-primary"
               >
                 <b-input
                   v-model="report.legend.position.left"
                 />
               </b-form-group>
-            </template>
-          </template>
-        </b-form-group>
-      </template>
+            </b-col>
+          </b-row>
+        </b-row>
+      </div>
 
       <template v-if="!hasAxis">
         <hr>
-        <h4 class="mb-3">
-          {{ $t('edit.additionalConfig.tooltip.label') }}
-        </h4>
+        <div class="px-3 text-primary">
+          <h5 class="mb-3">
+            {{ $t('edit.additionalConfig.tooltip.label') }}
+          </h5>
 
-        <b-form-group
-          horizontal
-          :label-cols="3"
-          breakpoint="md"
-          :label="$t('edit.additionalConfig.tooltip.formatting.label')"
-          :description="$t('edit.additionalConfig.tooltip.formatting.description')"
-          class="mt-1"
-        >
-          <b-input
-            v-model="report.tooltip.formatting"
-            :placeholder="$t('edit.additionalConfig.tooltip.formatting.placeholder')"
-          />
-        </b-form-group>
-        <b-form-group
-          horizontal
-          :label-cols="3"
-          breakpoint="md"
-        >
-          <b-form-checkbox
-            v-model="report.tooltip.labelsNextToPartition"
+          <b-form-group
+            :label="$t('edit.additionalConfig.tooltip.formatting.label')"
+            :description="$t('edit.additionalConfig.tooltip.formatting.description')"
           >
-            {{ $t('edit.additionalConfig.tooltip.labelNextToChartPartition') }}
-          </b-form-checkbox>
-        </b-form-group>
+            <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>
-      <template>
-        <h4 class="mb-3">
+      <div class="px-3">
+        <h5 class="mb-3">
           {{ $t('edit.additionalConfig.offset.label') }}
-        </h4>
-        <b-form-checkbox
-          v-model="report.offset.isDefault"
-          class="mb-3"
+        </h5>
+
+        <b-row
+          class="text-primary"
         >
-          {{ $t('edit.additionalConfig.offset.default') }}
-        </b-form-checkbox>
-        <b-form-group
+          <b-col
+            cols="12"
+            md="6"
+          >
+            <b-form-group
+              :label="$t('edit.additionalConfig.offset.default')"
+            >
+              <c-input-checkbox
+                v-model="report.offset.isDefault"
+                switch
+                :labels="checkboxLabel"
+                class="mb-3"
+              />
+            </b-form-group>
+          </b-col>
+        </b-row>
+
+        <b-row
           v-if="!report.offset.isDefault"
-          horizontal
-          breakpoint="md"
+          class="text-primary"
         >
-          <b-form-group
-            horizontal
-            :label-cols="3"
-            breakpoint="md"
-            :label="$t('edit.additionalConfig.offset.position.top')"
-            class="mt-1"
+          <b-col
+            cols="12"
+            md="6"
           >
-            <b-input
-              v-model="report.offset.top"
-            />
-          </b-form-group>
-          <b-form-group
-            horizontal
-            :label-cols="3"
-            :label="$t('edit.additionalConfig.offset.position.right')"
-            breakpoint="md"
-            class="mt-1"
+            <b-form-group
+              :label="$t('edit.additionalConfig.offset.position.top')"
+            >
+              <b-input
+                v-model="report.offset.top"
+              />
+            </b-form-group>
+          </b-col>
+
+          <b-col
+            cols="12"
+            md="6"
           >
-            <b-input
-              v-model="report.offset.right"
-            />
-          </b-form-group>
-          <b-form-group
-            horizontal
-            :label-cols="3"
-            :label="$t('edit.additionalConfig.offset.position.bottom')"
-            breakpoint="md"
-            class="mt-1"
+            <b-form-group
+              :label="$t('edit.additionalConfig.offset.position.right')"
+            >
+              <b-input
+                v-model="report.offset.right"
+              />
+            </b-form-group>
+          </b-col>
+
+          <b-col
+            cols="12"
+            md="6"
           >
-            <b-input
-              v-model="report.offset.bottom"
-            />
-          </b-form-group>
-          <b-form-group
-            horizontal
-            :label-cols="3"
-            :label="$t('edit.additionalConfig.offset.position.left')"
-            breakpoint="md"
-            :description="$t('edit.additionalConfig.offset.valueRange')"
-            class="mt-1"
+            <b-form-group
+              :label="$t('edit.additionalConfig.offset.position.bottom')"
+            >
+              <b-input
+                v-model="report.offset.bottom"
+              />
+            </b-form-group>
+          </b-col>
+
+          <b-col
+            cols="12"
+            md="6"
           >
-            <b-input
-              v-model="report.offset.left"
-            />
-          </b-form-group>
-        </b-form-group>
-      </template>
+            <b-form-group
+              :label="$t('edit.additionalConfig.offset.position.left')"
+              :description="$t('edit.additionalConfig.offset.valueRange')"
+            >
+              <b-input
+                v-model="report.offset.left"
+              />
+            </b-form-group>
+          </b-col>
+        </b-row>
+      </div>
     </template>
   </report-edit>
 </template>
@@ -418,6 +529,8 @@ const ignoredCharts = [
 ]
 
 export default {
+  name: 'GenericChart',
+
   i18nOptions: {
     namespaces: 'chart',
   },
diff --git a/client/web/compose/src/components/Chart/Report/ReportEdit.vue b/client/web/compose/src/components/Chart/Report/ReportEdit.vue
index cc4884fc8..f3761b0e0 100644
--- a/client/web/compose/src/components/Chart/Report/ReportEdit.vue
+++ b/client/web/compose/src/components/Chart/Report/ReportEdit.vue
@@ -1,158 +1,209 @@
 <template>
   <div>
     <!-- Configure source module -->
-    <b-form-group
-      :label="$t('edit.module.label')"
-    >
-      <b-form-select
-        v-model="moduleID"
-        :options="modules"
-        text-field="name"
-        class="mt-1"
-        value-field="moduleID"
-      >
-        <template slot="first">
-          <option
-            :value="undefined"
-          >
-            {{ $t('edit.module.placeholder') }}
-          </option>
-        </template>
-      </b-form-select>
-    </b-form-group>
-
-    <!-- Configure report filters -->
     <div
-      v-if="!!module"
-      class="mt-1"
+      class="px-3"
     >
-      <b-form-group
-        :label="$t('edit.filter.label')"
-      >
-        <b-form-select
-          v-model="report.filter"
-          :options="predefinedFilters"
-          class="mb-2"
+      <h5 class="mb-3">
+        {{ $t('edit.module.title') }}
+      </h5>
+
+      <b-row>
+        <b-col
+          cols="12"
+          md="6"
+          class="text-primary"
         >
-          <template slot="first">
-            <b-form-select-option :value="defaultFilterOption">
-              {{ $t('edit.filter.noFilter') }}
-            </b-form-select-option>
-          </template>
-        </b-form-select>
-
-        <b-form-textarea
-          v-model="report.filter"
-          :placeholder="$t('edit.filter.placeholder')"
-        />
-
-        <b-form-text>
-          <i18next
-            path="edit.filter.footnote"
-            tag="label"
+          <b-form-group
+            :label="$t('edit.module.label')"
           >
-            <code>${recordID}</code>
-            <code>${ownerID}</code>
-            <code>${userID}</code>
-          </i18next>
-        </b-form-text>
-      </b-form-group>
+            <b-form-select
+              v-model="moduleID"
+              :options="modules"
+              text-field="name"
+              value-field="moduleID"
+            >
+              <template slot="first">
+                <option
+                  :value="undefined"
+                >
+                  {{ $t('edit.module.placeholder') }}
+                </option>
+              </template>
+            </b-form-select>
+          </b-form-group>
+        </b-col>
+
+        <b-col
+          v-if="!!module"
+          cols="12"
+          md="6"
+          class="text-primary"
+        >
+          <b-form-group
+            :label="$t('edit.filter.label')"
+          >
+            <b-form-select
+              v-model="report.filter"
+              :options="predefinedFilters"
+            >
+              <template slot="first">
+                <b-form-select-option :value="defaultFilterOption">
+                  {{ $t('edit.filter.noFilter') }}
+                </b-form-select-option>
+              </template>
+            </b-form-select>
+          </b-form-group>
+        </b-col>
+
+        <!-- Configure report filters -->
+        <b-col
+          v-if="!!module"
+          class="mt-1 text-primary"
+          cols="12"
+        >
+          <b-form-group
+            :label="$t('edit.filter.label')"
+          >
+            <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>
+          </b-form-group>
+        </b-col>
+      </b-row>
     </div>
+    <hr v-if="module">
 
     <!-- Configure report dimensions -->
-    <div v-if="!!module">
-      <hr>
-
+    <div
+      v-if="!!module"
+      class="px-3"
+    >
       <fieldset
         v-for="(d, i) in dimensions"
         :key="i"
       >
-        <h4 class="mb-3">
+        <h5 class="mb-3">
           {{ $t('edit.dimension.label') }}
-        </h4>
+        </h5>
 
         <template v-if="usesDimensionsField">
-          <b-form-group
-            horizontal
-            :label-cols="3"
-            breakpoint="md"
-            :label="$t('edit.dimension.fieldLabel')"
+          <b-row
+            class="text-primary"
           >
-            <b-form-select
-              v-model="d.field"
-              :options="dimensionFields"
-              @change="onDimFieldChange($event, d)"
+            <b-col
+              cols="12"
+              md="6"
             >
-              <template slot="first">
-                <option
-                  :value="undefined"
+              <b-form-group
+                :label="$t('edit.dimension.fieldLabel')"
+                class="text-primary"
+              >
+                <b-form-select
+                  v-model="d.field"
+                  :options="dimensionFields"
+                  @change="onDimFieldChange($event, d)"
                 >
-                  {{ $t('edit.dimension.fieldPlaceholder') }}
-                </option>
-              </template>
-            </b-form-select>
-          </b-form-group>
+                  <template slot="first">
+                    <option
+                      :value="undefined"
+                    >
+                      {{ $t('edit.dimension.fieldPlaceholder') }}
+                    </option>
+                  </template>
+                </b-form-select>
+              </b-form-group>
+            </b-col>
 
-          <b-form-group
-            horizontal
-            :label-cols="3"
-            breakpoint="md"
-            :label="$t('edit.dimension.function.label')"
-          >
-            <b-form-select
-              v-model="d.modifier"
-              :disabled="!d.field || !isTemporalField(d.field)"
-              :options="dimensionModifiers"
+            <b-col
+              cols="12"
+              md="6"
             >
-              <template slot="first">
-                <option
-                  :value="undefined"
+              <b-form-group
+                :label="$t('edit.dimension.function.label')"
+                class="text-primary"
+              >
+                <b-form-select
+                  v-model="d.modifier"
+                  :disabled="!d.field || !isTemporalField(d.field)"
+                  :options="dimensionModifiers"
                 >
-                  {{ $t('edit.dimension.function.placeholder') }}
-                </option>
-              </template>
-            </b-form-select>
-          </b-form-group>
+                  <template slot="first">
+                    <option
+                      :value="undefined"
+                    >
+                      {{ $t('edit.dimension.function.placeholder') }}
+                    </option>
+                  </template>
+                </b-form-select>
+              </b-form-group>
+            </b-col>
+          </b-row>
 
           <template v-if="!unSkippable">
-            <b-form-group
-              horizontal
-              :label-cols="3"
-              breakpoint="md"
-            >
-              <b-form-checkbox
-                v-model="d.skipMissing"
+            <b-row>
+              <b-col
+                cols="12"
+                md="6"
               >
-                {{ $t('edit.dimension.skipMissingValues') }}
-              </b-form-checkbox>
-            </b-form-group>
+                <b-form-group
+                  :label="$t('edit.dimension.rotate.label')"
+                  :description="$t('edit.dimension.rotate.description')"
+                  class="text-primary"
+                >
+                  <b-input
+                    v-model="d.rotateLabel"
+                    type="number"
+                    number
+                  />
+                </b-form-group>
+              </b-col>
 
-            <b-form-group
-              v-if="!d.skipMissing"
-              horizontal
-              :label-cols="3"
-              breakpoint="md"
-              :label="$t('edit.dimension.defaultValueLabel')"
-              :description="$t('edit.dimension.defaultValueFootnote')"
-            >
-              <b-form-input
-                v-model="d.default"
-                :type="defaultValueInputType(d)"
-              />
-            </b-form-group>
-            <b-form-group
-              horizontal
-              :label-cols="3"
-              breakpoint="md"
-              :label="$t('edit.dimension.rotate.label')"
-              :description="$t('edit.dimension.rotate.description')"
-            >
-              <b-input
-                v-model="d.rotateLabel"
-                type="number"
-                number
-              />
-            </b-form-group>
+              <b-col
+                cols="12"
+                md="6"
+              >
+                <b-form-group
+                  :label="$t('edit.dimension.skipMissingValues')"
+                  class="text-primary"
+                >
+                  <c-input-checkbox
+                    :value="!!d.skipMissing"
+                    switch
+                    :labels="checkboxLabel"
+                    @change="d.skipMissing = $event"
+                  />
+                </b-form-group>
+              </b-col>
+
+              <b-col
+                v-if="!d.skipMissing"
+                cols="12"
+                md="6"
+              >
+                <b-form-group
+                  :label="$t('edit.dimension.defaultValueLabel')"
+                  :description="$t('edit.dimension.defaultValueFootnote')"
+                  class="text-primary"
+                >
+                  <b-form-input
+                    v-model="d.default"
+                    :type="defaultValueInputType(d)"
+                  />
+                </b-form-group>
+              </b-col>
+            </b-row>
           </template>
         </template>
 
@@ -163,10 +214,15 @@
           :field="getField(d)"
         />
       </fieldset>
+    </div>
+    <hr v-if="!!module">
 
-      <hr>
-
-      <h4 class="d-flex align-items-center mb-3">
+    <!-- Configure report metrics -->
+    <div
+      v-if="!!module"
+      class="px-3"
+    >
+      <h5 class="d-flex align-items-center mb-3">
         {{ $t('edit.metric.title') }}
         <b-button
           v-if="canAddMetric"
@@ -176,9 +232,8 @@
         >
           + {{ $t('edit.metric.add') }}
         </b-button>
-      </h4>
+      </h5>
 
-      <!-- Configure report metrics -->
       <draggable
         class="metrics mb-3"
         :list.sync="metrics"
@@ -208,47 +263,55 @@
             </b-button>
           </h5>
 
-          <b-form-group
-            horizontal
-            :label-cols="3"
-            breakpoint="md"
-            :label="$t('edit.metric.fieldLabel')"
-          >
-            <b-form-select
-              v-model="m.field"
-              :options="metricFields"
-              @change="onMetricFieldChange($event, m)"
+          <b-row>
+            <b-col
+              cols="12"
+              md="6"
             >
-              <template slot="first">
-                <option
-                  :value="undefined"
+              <b-form-group
+                :label="$t('edit.metric.fieldLabel')"
+                class="text-primary"
+              >
+                <b-form-select
+                  v-model="m.field"
+                  :options="metricFields"
+                  @change="onMetricFieldChange($event, m)"
                 >
-                  {{ $t('edit.metric.fieldPlaceholder') }}
-                </option>
-              </template>
-            </b-form-select>
-          </b-form-group>
+                  <template slot="first">
+                    <option
+                      :value="undefined"
+                    >
+                      {{ $t('edit.metric.fieldPlaceholder') }}
+                    </option>
+                  </template>
+                </b-form-select>
+              </b-form-group>
+            </b-col>
 
-          <b-form-group
-            horizontal
-            :label-cols="3"
-            breakpoint="md"
-            :label="$t('edit.metric.function.label')"
-          >
-            <b-form-select
-              v-model="m.aggregate"
-              :disabled="!m.field || m.field === 'count'"
-              :options="metricAggregates"
+            <b-col
+              cols="12"
+              md="6"
             >
-              <template slot="first">
-                <option
-                  :value="undefined"
+              <b-form-group
+                :label="$t('edit.metric.function.label')"
+                class="text-primary"
+              >
+                <b-form-select
+                  v-model="m.aggregate"
+                  :disabled="!m.field || m.field === 'count'"
+                  :options="metricAggregates"
                 >
-                  {{ $t('edit.metric.function.placeholder') }}
-                </option>
-              </template>
-            </b-form-select>
-          </b-form-group>
+                  <template slot="first">
+                    <option
+                      :value="undefined"
+                    >
+                      {{ $t('edit.metric.function.placeholder') }}
+                    </option>
+                  </template>
+                </b-form-select>
+              </b-form-group>
+            </b-col>
+          </b-row>
 
           <slot
             name="metric-options"
@@ -257,15 +320,15 @@
         </fieldset>
       </draggable>
     </div>
+    <hr v-if="!!module && hasAxis">
 
     <template v-if="hasAxis">
-      <hr>
-
       <slot
         name="y-axis"
         :report="editReport"
       />
     </template>
+    <hr v-if="hasAxis">
 
     <slot
       name="additional-config"
diff --git a/client/web/compose/src/components/Chart/Report/base.vue b/client/web/compose/src/components/Chart/Report/base.vue
index d17032c8b..697905ab6 100644
--- a/client/web/compose/src/components/Chart/Report/base.vue
+++ b/client/web/compose/src/components/Chart/Report/base.vue
@@ -45,6 +45,15 @@ export default {
     },
   },
 
+  data () {
+    return {
+      checkboxLabel: {
+        on: this.$t('general:label.yes'),
+        off: this.$t('general:label.no'),
+      },
+    }
+  },
+
   computed: {
     editReport: {
       get () {
diff --git a/client/web/compose/src/components/PageBlocks/RecordListConfigurator.vue b/client/web/compose/src/components/PageBlocks/RecordListConfigurator.vue
index a58fa1883..cab377947 100644
--- a/client/web/compose/src/components/PageBlocks/RecordListConfigurator.vue
+++ b/client/web/compose/src/components/PageBlocks/RecordListConfigurator.vue
@@ -724,7 +724,7 @@ import AutomationTab from './Shared/AutomationTab'
 import FieldPicker from 'corteza-webapp-compose/src/components/Common/FieldPicker'
 import RecordListFilter from 'corteza-webapp-compose/src/components/Common/RecordListFilter'
 import { components } from '@cortezaproject/corteza-vue'
-const { CInputPresort, CInputCheckbox } = components
+const { CInputPresort } = components
 
 export default {
   i18nOptions: {
@@ -737,7 +737,6 @@ export default {
     AutomationTab,
     FieldPicker,
     CInputPresort,
-    CInputCheckbox,
     RecordListFilter,
     VueSelect,
   },
diff --git a/client/web/compose/src/components/index.js b/client/web/compose/src/components/index.js
index ba21dc7cf..96cad3bac 100644
--- a/client/web/compose/src/components/index.js
+++ b/client/web/compose/src/components/index.js
@@ -55,6 +55,7 @@ Vue.component('c-permissions-button', components.CPermissionsButton)
 Vue.component('c-input-confirm', components.CInputConfirm)
 Vue.component('c-input-processing', components.CInputProcessing)
 Vue.component('c-resource-list', components.CResourceList)
+Vue.component('c-input-checkbox', components.CInputCheckbox)
 
 // Map things
 Vue.component('l-map', LMap)
diff --git a/client/web/compose/src/views/Admin/Charts/Edit.vue b/client/web/compose/src/views/Admin/Charts/Edit.vue
index ca0c91dab..e72c1710f 100644
--- a/client/web/compose/src/views/Admin/Charts/Edit.vue
+++ b/client/web/compose/src/views/Admin/Charts/Edit.vue
@@ -17,7 +17,7 @@
       fluid="xl"
       @submit.prevent="handleSave"
     >
-      <b-row no-gutters>
+      <b-row>
         <b-col>
           <b-card
             no-body
@@ -36,102 +36,135 @@
             </b-card-header>
             <b-container
               fluid
-              class="px-4 py-3"
+              class="p-0"
             >
               <b-row>
                 <b-col
-                  md="6"
+                  md="7"
                   sm="12"
                 >
-                  <div v-if="modules">
-                    <b-form-group
-                      :label="$t('name')"
+                  <div
+                    class="pt-3 px-3"
+                  >
+                    <h5>
+                      {{ $t('generalSettings') }}
+                    </h5>
+                    <b-row
+                      v-if="modules"
                     >
-                      <b-form-input
-                        v-model="chart.name"
-                        :state="nameState"
-                      />
-                    </b-form-group>
-
-                    <b-form-group
-                      :label="$t('handle')"
-                    >
-                      <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-form-group
-                      :label="$t('colorScheme.label')"
-                    >
-                      <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')"
-                        :clearable="true"
-                        :calculate-position="calculateDropdownPosition"
-                        class="bg-white h-100 w-100"
+                      <b-col
+                        cols="12"
+                        md="6"
                       >
-                        <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"
+                        <b-form-group
+                          :label="$t('name')"
+                          class="text-primary"
+                        >
+                          <b-form-input
+                            v-model="chart.name"
+                            :state="nameState"
                           />
-                        </template>
-                      </vue-select>
-                      <template
-                        v-if="currentColorScheme"
+                        </b-form-group>
+                      </b-col>
+
+                      <b-col
+                        cols="12"
+                        md="6"
+                      >
+                        <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-col
+                        cols="12"
+                        md="6"
                       >
                         <div
-                          v-for="(color, index) in currentColorScheme.colors"
-                          :key="`${currentColorScheme.value}-${index}`"
-                          :style="`background: ${color};`"
-                          class="d-inline-block color-box mr-1"
-                        />
-                      </template>
-                    </b-form-group>
+                          :label="$t('colorScheme.label')"
+                        >
+                          <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>
 
-                    <b-form-group>
-                      <b-form-checkbox
-                        v-model="chart.config.noAnimation"
-                        :value="false"
-                        :unchecked-value="true"
-                        switch
+                          <template
+                            v-if="currentColorScheme"
+                          >
+                            <div
+                              v-for="(color, index) in currentColorScheme.colors"
+                              :key="`${currentColorScheme.value}-${index}`"
+                              :style="`background: ${color};`"
+                              class="d-inline-block color-box mr-1"
+                            />
+                          </template>
+                        </div>
+                      </b-col>
+
+                      <b-col
+                        cols="12"
+                        md="6"
+                        class="mt-2 mt-md-0"
                       >
-                        {{ $t('edit.animation.enabled') }}
-                      </b-form-checkbox>
-                    </b-form-group>
-
-                    <hr>
+                        <b-form-group
+                          :label="$t('edit.animation.enabled')"
+                          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">
 
                   <!-- Some charts support multiple reports -->
                   <fieldset
                     v-if="supportsMultipleReports"
-                    class="form-group mt-2"
+                    class="form-group"
                   >
-                    <b-form-group class="mb-2">
-                      <h4 class="d-inline-block">
+                    <b-form-group class=" px-3">
+                      <h5 class="d-inline-block">
                         {{ $t('configure.reportsLabel') }}
-                      </h4>
+                      </h5>
+
                       <b-btn
                         v-if="reportsValid"
                         class="float-right p-0"
@@ -140,7 +173,8 @@
                       >
                         + {{ $t('general.label.add') }}
                       </b-btn>
-                      <div class="ml-1">
+
+                      <div>
                         <draggable
                           v-model="reports"
                           handle=".handle"
@@ -159,6 +193,7 @@
                               <template v-if="r.moduleID">
                                 {{ moduleName(r.moduleID) }}
                               </template>
+
                               <template v-else>
                                 {{ $t('edit.unconfiguredReport') }}
                               </template>
@@ -169,7 +204,7 @@
                     </b-form-group>
                   </fieldset>
 
-                  <!-- Generic report editing component -->
+                  <!-- General report editing component -->
                   <component
                     :is="reportEditor"
                     v-if="editReport"
@@ -182,24 +217,29 @@
                 </b-col>
 
                 <b-col
-                  md="6"
+                  md="5"
                   sm="12"
                 >
                   <div
                     class="d-flex flex-column position-sticky"
                     style="top: 0;"
                   >
-                    <b-button
-                      :disabled="processing || !reportsValid"
-                      variant="outline-primary"
-                      @click.prevent="update"
-                    >
-                      {{ $t('edit.loadData') }}
-                    </b-button>
-
                     <div
-                      class="chart-preview mt-5"
+                      class="chart-preview mt-2"
                     >
+                      <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>
+
                       <chart-component
                         ref="chart"
                         :chart="chart"
@@ -238,7 +278,7 @@ import EditorToolbar from 'corteza-webapp-compose/src/components/Admin/EditorToo
 import { compose, NoID, shared } from '@cortezaproject/corteza-js'
 import Export from 'corteza-webapp-compose/src/components/Admin/Export'
 import ChartComponent from 'corteza-webapp-compose/src/components/Chart'
-import { handle } from '@cortezaproject/corteza-vue'
+import { handle, components } from '@cortezaproject/corteza-vue'
 import draggable from 'vuedraggable'
 import ReportItem from 'corteza-webapp-compose/src/components/Chart/ReportItem'
 import Reports from 'corteza-webapp-compose/src/components/Chart/Report'
@@ -246,6 +286,7 @@ import { chartConstructor } from 'corteza-webapp-compose/src/lib/charts'
 import VueSelect from 'vue-select'
 import { evaluatePrefilter } from 'corteza-webapp-compose/src/lib/record-filter'
 import { debounce } from 'lodash'
+const { CInputCheckbox } = components
 const { colorschemes } = shared
 
 const defaultReport = {
@@ -266,6 +307,7 @@ export default {
     draggable,
     ReportItem,
     VueSelect,
+    CInputCheckbox,
   },
 
   props: {
@@ -293,6 +335,10 @@ export default {
       processing: false,
 
       editReportIndex: undefined,
+      checkboxLabel: {
+        on: this.$t('general:label.yes'),
+        off: this.$t('general:label.no'),
+      },
     }
   },
 
@@ -554,13 +600,38 @@ export default {
   },
 }
 </script>
-<style lang="scss" scoped>
+<style lang="scss">
+
 .chart-preview {
-  max-height: 50vh;
+  max-height: 50%;
 }
 
 .color-box {
   width: 28px;
   height: 12px;
 }
+
+.color-selector {
+
+  .vs__dropdown-menu {
+    min-width: 100%;
+  }
+
+  .vs__dropdown-option {
+    text-overflow: ellipsis;
+    overflow-x: hidden;
+  }
+  .vs__selected-options {
+    width: 0;
+    flex-wrap: nowrap;
+  }
+
+  .vs__selected {
+    max-width: 230px;
+    display: inline-block;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+}
 </style>
diff --git a/lib/vue/src/components/input/CInputCheckbox.vue b/lib/vue/src/components/input/CInputCheckbox.vue
index d2edbd9fb..bbe723dbe 100644
--- a/lib/vue/src/components/input/CInputCheckbox.vue
+++ b/lib/vue/src/components/input/CInputCheckbox.vue
@@ -63,6 +63,6 @@ export default {
         'font-weight-bold': value,
       }
     }
-  }
+  },
 }
 </script>
diff --git a/locale/en/corteza-webapp-compose/chart.yaml b/locale/en/corteza-webapp-compose/chart.yaml
index 72a817388..7d605864d 100644
--- a/locale/en/corteza-webapp-compose/chart.yaml
+++ b/locale/en/corteza-webapp-compose/chart.yaml
@@ -105,12 +105,15 @@ edit:
   module:
     label: Module
     placeholder: Pick a module
+    title: Data Source
   title: Chart builder
   unconfiguredReport: Unconfigured report
   yAxis:
     axisOnRight: Place axis on the right side
     axisScaleFromZero: Always begin axis scale at zero
     label: Y-axis
+    options:
+      label: Options
     rotate:
       label: Rotate labels
       description: Labels can be rotated from -90 to 90 degrees
@@ -166,6 +169,7 @@ import: 'Import chart(s):'
 newLabel: 'Create a new chart:'
 name: Chart name *
 handle: Handle
+generalSettings: General settings
 notification:
   loadFailed: Could not load chart
   saveFailed: Could not save this chart