Address comments

cortezaproject · Apr 23, 2024 · b68afae · b68afae
1 parent e3f7962
commit b68afae
Show file tree

Hide file tree

Showing 12 changed files with 227 additions and 320 deletions.
diff --git a/client/web/compose/src/components/Chart/Report/FunnelChart.vue b/client/web/compose/src/components/Chart/Report/FunnelChart.vue
@@ -30,25 +30,10 @@
 
     <template #metric-options="{ metric, presetFormattedOptions }">
       <b-row>
-        <b-col
-          cols="12"
-          md="6"
-          lg="6"
-        >
-          <b-form-group
-            :label="$t('numberFormat')"
-            label-class="text-primary"
-          >
-            <b-input
-              v-model="report.metricFormatter.numberFormat"
-              placeholder="0.00"
-            />
-          </b-form-group>
-        </b-col>
-
         <b-col
           cols="12"
           lg="6"
+          offset-lg="6"
         >
           <b-form-group
             :label="$t('edit.metric.options.label')"
@@ -75,7 +60,26 @@
         </b-col>
       </b-row>
 
+      <hr>
+
       <b-row>
+        <b-col
+          cols="12"
+          md="6"
+          lg="6"
+        >
+          <b-form-group
+            :label="$t('numberFormat')"
+            label-class="text-primary"
+          >
+            <b-input
+              v-model="report.metricFormatter.numberFormat"
+              :disabled="report.metricFormatter.presetFormat !== 'noFormat'"
+              placeholder="0.00"
+            />
+          </b-form-group>
+        </b-col>
+
         <b-col
           cols="12"
           md="6"
@@ -117,85 +121,12 @@
             <b-form-select
               v-model="report.metricFormatter.presetFormat"
               :options="presetFormattedOptions.formatOptions"
+              :disabled="!!report.metricFormatter.numberFormat"
             />
           </b-form-group>
         </b-col>
       </b-row>
     </template>
-
-    <template #additional-config="{ report, presetFormattedOptions }">
-      <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('numberFormat')"
-              label-class="text-primary"
-            >
-              <b-input
-                v-model="report.tooltipFormatter.numberFormat"
-                placeholder="0.00"
-              />
-            </b-form-group>
-          </b-col>
-
-          <b-col
-            cols="12"
-            md="6"
-          >
-            <b-form-group
-              :label="$t('prefix')"
-              label-class="text-primary"
-            >
-              <b-input
-                v-model="report.tooltipFormatter.prefix"
-                placeholder="USD/mo"
-              />
-            </b-form-group>
-          </b-col>
-        </b-row>
-
-        <b-row>
-          <b-col
-            cols="12"
-            md="6"
-          >
-            <b-form-group
-              :label="$t('suffix')"
-              label-class="text-primary"
-            >
-              <b-input
-                v-model="report.tooltipFormatter.suffix"
-                placeholder="$"
-              />
-            </b-form-group>
-          </b-col>
-          <b-col
-            cols="12"
-            lg="6"
-          >
-            <b-form-group
-              :label="$t('edit.additionalConfig.tooltip.formatting.presetFormats.label')"
-              label-class="text-primary"
-              style="white-space: pre-line;"
-              :description="presetFormattedOptions.formattedOptionsDescription"
-            >
-              <b-form-select
-                v-model="report.tooltipFormatter.presetFormat"
-                :options="presetFormattedOptions.formatOptions"
-              />
-            </b-form-group>
-          </b-col>
-        </b-row>
-      </div>
-    </template>
   </report-edit>
 </template>
 

diff --git a/client/web/compose/src/components/Chart/Report/GaugeChart.vue b/client/web/compose/src/components/Chart/Report/GaugeChart.vue
@@ -125,6 +125,8 @@
         </b-col>
       </b-row>
 
+      <hr>
+
       <b-row>
         <b-col
           cols="12"
@@ -136,6 +138,7 @@
           >
             <b-input
               v-model="report.metricFormatter.numberFormat"
+              :disabled="report.metricFormatter.presetFormat !== 'noFormat'"
               placeholder="0.00"
             />
           </b-form-group>
@@ -185,70 +188,13 @@
           >
             <b-form-select
               v-model="report.metricFormatter.presetFormat"
+              :disabled="!!report.metricFormatter.numberFormat"
               :options="presetFormattedOptions.formatOptions"
             />
           </b-form-group>
         </b-col>
       </b-row>
     </template>
-
-    <template #additional-config="{ report }">
-      <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('numberFormat')"
-              label-class="text-primary"
-            >
-              <b-input
-                v-model="report.tooltipFormatter.numberFormat"
-                placeholder="0.00"
-              />
-            </b-form-group>
-          </b-col>
-
-          <b-col
-            cols="12"
-            md="6"
-          >
-            <b-form-group
-              :label="$t('prefix')"
-              label-class="text-primary"
-            >
-              <b-input
-                v-model="report.tooltipFormatter.prefix"
-                placeholder="USD/mo"
-              />
-            </b-form-group>
-          </b-col>
-        </b-row>
-
-        <b-row>
-          <b-col
-            cols="12"
-            md="6"
-          >
-            <b-form-group
-              :label="$t('suffix')"
-              label-class="text-primary"
-            >
-              <b-input
-                v-model="report.tooltipFormatter.suffix"
-                placeholder="$"
-              />
-            </b-form-group>
-          </b-col>
-        </b-row>
-      </div>
-    </template>
   </report-edit>
 </template>