bfg-common 1.4.853 → 1.4.855

package/components/common/monitor/advanced/tools/chartOptionsModal/ChartOptionsModal.vue

@@ -1,94 +1,73 @@
 <template>
-  <common-monitor-advanced-tools-chart-options-modal-new
-    v-if="isNewView"
-    v-model:selected-rows="selectedRows"
-    v-model:selected-metric-local="selectedMetricLocal"
-    v-model:local-period-type="localPeriodType"
-    v-model:local-custom-time="localCustomTime"
-    v-model:selected-chart-type-local="selectedChartTypeLocal"
-    v-model:timespan-type="timespanType"
-    v-model:unit-count="unitCount"
-    :type="props.type"
-    :language="props.language"
-    :options-names="optionsNames"
-    :local-selected-chart-option-name="localSelectedChartOptionName"
-    :custom-date-from="props.customDateFrom"
-    :custom-date-to="props.customDateTo"
-    :custom-time-from="props.customTimeFrom"
-    :custom-time-to="props.customTimeTo"
-    :total-cores="props.totalCores"
-    :hostId="props.hostId"
-    :selected-objects="props.selectedObjects"
-    :objects-loading="props.objectsLoading"
-    :objects-data="props.objectsData"
-    :valid-date-end="props.validDateEnd"
-    :is-disabled-submit="isDisabledSubmit"
-    :is-show-alerts="isShowAlerts"
-    :alerts="alerts"
-    :metrics-items="metricsItems"
-    :local-selected-counters-keys="localSelectedCountersKeys"
-    :local-selected-chart-type="selectedChartTypeLocal"
-    :local-selected-timespan-type="localSelectedTimespanType"
-    :local-units-count="localUnitsCount"
-    :selected-metrics-keys="selectedMetricsKeys"
-    @hide-main-modal="onHideMainModal"
-    @submit-main-modal="onSubmitMainModal"
-    @remove-alerts="onRemoveAlerts"
-    @save-options="onSaveOptions"
-    @check-validations="onCheckValidations"
-    @select-local-option-name="onSelectLocalOptionName"
-    @delete-chart-name="onDeleteChartName"
-    @update-custom-date-from="onUpdateCustomDateFrom"
-    @update-custom-date-to="onUpdateCustomDateTo"
-    @update-custom-time-from="onUpdateCustomTimeFrom"
-    @update-custom-time-to="onUpdateCustomTimeTo"
-    @local-selected-objects="localSelectedObjects = $event"
-  />
-  <common-monitor-advanced-tools-chart-options-modal-old
-    v-else
-    v-model:selected-rows="selectedRows"
-    v-model:selected-metric-local="selectedMetricLocal"
-    v-model:local-period-type="localPeriodType"
-    v-model:local-custom-time="localCustomTime"
-    v-model:selected-chart-type-local="selectedChartTypeLocal"
-    v-model:timespan-type="timespanType"
-    v-model:unit-count="unitCount"
-    :type="props.type"
-    :language="props.language"
-    :options-names="optionsNames"
-    :local-selected-chart-option-name="localSelectedChartOptionName"
-    :custom-date-from="props.customDateFrom"
-    :custom-date-to="props.customDateTo"
-    :custom-time-from="props.customTimeFrom"
-    :custom-time-to="props.customTimeTo"
-    :total-cores="props.totalCores"
-    :hostId="props.hostId"
-    :selected-objects="props.selectedObjects"
-    :objects-loading="props.objectsLoading"
-    :objects-data="props.objectsData"
-    :valid-date-end="props.validDateEnd"
-    :is-disabled-submit="isDisabledSubmit"
-    :is-show-alerts="isShowAlerts"
-    :alerts="alerts"
-    :metrics-items="metricsItems"
-    :local-selected-counters-keys="localSelectedCountersKeys"
-    :local-selected-chart-type="localSelectedChartType"
-    :local-selected-timespan-type="localSelectedTimespanType"
-    :local-units-count="localUnitsCount"
-    :selected-metrics-keys="selectedMetricsKeys"
-    @hide-main-modal="onHideMainModal"
-    @submit-main-modal="onSubmitMainModal"
-    @remove-alerts="onRemoveAlerts"
-    @save-options="onSaveOptions"
-    @check-validations="onCheckValidations"
-    @select-local-option-name="onSelectLocalOptionName"
-    @delete-chart-name="onDeleteChartName"
-    @update-custom-date-from="onUpdateCustomDateFrom"
-    @update-custom-date-to="onUpdateCustomDateTo"
-    @update-custom-time-from="onUpdateCustomTimeFrom"
-    @update-custom-time-to="onUpdateCustomTimeTo"
-    @local-selected-objects="localSelectedObjects = $event"
-  />
+  <div class="chart-options-modal">
+    <atoms-modal
+      width="1150px"
+      :show="true"
+      :title="localization.inventoryMonitor.chartOptions"
+      :disabled-submit="isDisabledSubmit"
+      @hide="onHide"
+      @submit="onSubmit"
+    >
+      <template #modalBody>
+        <common-monitor-advanced-tools-chart-options-modal-notification
+          v-show="isShowAlerts"
+          :alerts="alerts"
+          @remove="onRemoveAlerts"
+        />
+        <div>
+          <common-monitor-advanced-tools-chart-options-modal-actions
+            :is-disabled-save="!selectedRows.length"
+            :options-names="optionsNames"
+            :selected-chart-option-name="localSelectedChartOptionName"
+            @save="onSaveOptions"
+            @check-validation="checkValidations"
+            @select-local-option-name="onSelectLocalOptionName"
+            @delete-chart-name="onDeleteChartName"
+          />
+
+          <div class="horizontal-flex-container chart-options-content">
+            <common-monitor-advanced-tools-chart-options-modal-metrics
+              v-model:selected-metric="selectedMetric"
+              :metrics-items="metricsItems"
+            />
+            <common-monitor-advanced-tools-chart-options-modal-counters
+              :chart="selectedMetric"
+              :language="props.language"
+              :type="props.type"
+              :selected-keys="localSelectedCountersKeys"
+              :selected-chart-type="localSelectedChartType"
+              :selected-timespan-type="localSelectedTimespanType"
+              :units-count="localUnitsCount"
+              :period-type="localPeriodType"
+              :selected-custom-time="localCustomTime"
+              :custom-date-from="props.customDateFrom"
+              :custom-date-to="props.customDateTo"
+              :custom-time-from="props.customTimeFrom"
+              :custom-time-to="props.customTimeTo"
+              :total-cores="props.totalCores"
+              :host-id="props.hostId"
+              :selected-metrics-keys="selectedMetricsKeys"
+              :selected-objects="props.selectedObjects"
+              :objects-loading="props.objectsLoading"
+              :objects-data="props.objectsData"
+              :valid-date-end="props.validDateEnd"
+              @select-row="selectedRows = $event"
+              @update-chart-type="selectedChartTypeLocal = $event"
+              @update-custom-time="localCustomTime = $event"
+              @update-timespan-type="timespanType = $event"
+              @update-unit-count="unitCount = $event"
+              @update-period-type="localPeriodType = $event"
+              @update-custom-date-from="onUpdateCustomDateFrom"
+              @update-custom-date-to="onUpdateCustomDateTo"
+              @update-custom-time-from="onUpdateCustomTimeFrom"
+              @update-custom-time-to="onUpdateCustomTimeTo"
+              @select-objects="localSelectedObjects = $event"
+            />
+          </div>
+        </div>
+      </template>
+    </atoms-modal>
+  </div>
 </template>
 
 <script setup lang="ts">
@@ -114,6 +93,7 @@ const props = defineProps<{
   language: string
   selectedCountersKeys: number[]
   selectedMetric: UI_T_ChartHost | UI_T_ChartVm
+  selectedMetricLocal: UI_T_ChartHost | UI_T_ChartVm
   selectedChartType: string
   selectedTimespanType: string
   unitsCount: number
@@ -149,10 +129,6 @@ const emits = defineEmits<{
   (event: 'select-objects', value: string): void
 }>()
 
-const { $store }: any = useNuxtApp()
-
-const isNewView = computed<boolean>(() => $store.getters['main/getIsNewView'])
-
 const routeType = '' + useRoute().params.type
 
 const localization = computed<UI_I_Localization>(() => useLocal())
@@ -177,10 +153,8 @@ const onUpdateCustomTimeTo = (value: string): void => {
 const metricsItems = computed<UI_I_VerticalTabs[]>(() =>
   metricsFunc(localization.value, props.type)
 )
-const selectedMetricLocal = ref<UI_T_ChartHost | UI_T_ChartVm>(
-  (props.selectedMetric || '' + metricsItems.value[0]?.value) as
-    | UI_T_ChartHost
-    | UI_T_ChartVm
+const selectedMetric = ref<UI_T_ChartHost | UI_T_ChartVm>(
+  props.selectedMetric || '' + metricsItems.value[0]?.value
 )
 
 const localSelectedCountersKeys = ref<number[]>([])
@@ -245,7 +219,7 @@ const onRemoveAlerts = (): void => {
   alerts.value = []
 }
 
-const onHideMainModal = (): void => {
+const onHide = (): void => {
   emits('hide')
 }
 
@@ -255,7 +229,7 @@ const selectedMetricsKeys = computed<number[]>(() =>
 )
 const selectedChartTypeLocal = ref<string>('')
 
-const onCheckValidations = (): boolean => {
+const checkValidations = (): boolean => {
   const checkDateResult = checkDateFunc(
     localization.value,
     localCustomDateFrom.value,
@@ -301,7 +275,7 @@ const currentFieldsByArray = (data: UI_I_AdvancedCounterItem[]): string => {
   const result: string[] = []
 
   data.forEach((item) => {
-    if (props.type === 'vm' && selectedMetricLocal.value === 'network') {
+    if (props.type === 'vm' && selectedMetric.value === 'network') {
       const currentFields = []
       const objectArray = localSelectedObjects.value.split(', ')
       if (objectArray.length) {
@@ -317,8 +291,8 @@ const currentFieldsByArray = (data: UI_I_AdvancedCounterItem[]): string => {
   return result.join(',')
 }
 
-const onSubmitMainModal = (): void => {
-  if (!onCheckValidations()) return
+const onSubmit = (): void => {
+  if (!checkValidations()) return
 
   if (['select_options', 'default'].includes(selectedLocalOptionName.value))
     selectedLocalOptionName.value = 'custom'
@@ -359,7 +333,7 @@ const onSubmitMainModal = (): void => {
   const savedObject = {
     fields: currentFields,
     optionName: selectedLocalOptionName.value,
-    metric: selectedMetricLocal.value,
+    metric: selectedMetric.value,
     counters: selectedRows.value,
     timespanType: timespanType.value,
     periodType: localPeriodType.value,
@@ -375,7 +349,7 @@ const onSubmitMainModal = (): void => {
   }
 
   emits('submit-options', savedObject)
-  onHideMainModal()
+  onHide()
 }
 
 const timespanType = ref<string>('')
@@ -398,7 +372,7 @@ const onSaveOptions = (name: string): void => {
     routeType,
     chartType,
     counters,
-    metric: selectedMetricLocal.value,
+    metric: selectedMetric.value,
     timespan: {
       periodType: localPeriodType.value,
       units: localCustomTime.value,
@@ -414,8 +388,7 @@ const onSaveOptions = (name: string): void => {
 }
 
 const setSelectOptions = (): void => {
-  selectedMetricLocal.value =
-    props.selectedMetric || metricsItems.value[0]?.value
+  selectedMetric.value = props.selectedMetric || metricsItems.value[0]?.value
   localSelectedCountersKeys.value = props.selectedCountersKeys
   localSelectedChartType.value = props.selectedChartType
   localSelectedTimespanType.value = props.selectedTimespanType
@@ -425,7 +398,7 @@ const setSelectOptions = (): void => {
 }
 
 const setDefaultOptions = (): void => {
-  selectedMetricLocal.value = metricsItems.value[0]?.value
+  selectedMetric.value = metricsItems.value[0]?.value
   localSelectedCountersKeys.value = []
   localSelectedChartType.value = 'spline'
   localSelectedTimespanType.value = ''
@@ -449,7 +422,7 @@ const setCustomOptions = (name: string): void => {
   else if (selectedValue.chartType === 'stacked_graph')
     currentChartType = 'area'
 
-  selectedMetricLocal.value = selectedValue.metric
+  selectedMetric.value = selectedValue.metric
   localSelectedCountersKeys.value = selectedValue.counters.map(
     (item) => item.id
   )
@@ -488,14 +461,14 @@ const onDeleteChartName = (name: string): void => {
 const isDisabledSubmit = computed<boolean>(() =>
   checkIsDisabledSubmit(
     props.type,
-    selectedMetricLocal.value,
+    selectedMetric.value,
     selectedRows.value.length,
     localSelectedObjects.value
   )
 )
 
 watch(
-  selectedMetricLocal,
+  selectedMetric,
   (newValue) => {
     emits('select-metric-local', newValue)
   },
@@ -507,4 +480,32 @@ onMounted(() => {
 })
 </script>
 
-<style scoped lang="scss"></style>
+<style scoped lang="scss">
+.chart-options-modal {
+  .loader-on :deep(.modal-body) {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  :deep(.modal-title) {
+    text-transform: capitalize;
+  }
+
+  #loader {
+    min-height: 90px;
+    text-align: center;
+  }
+
+  .chart-options-content {
+    display: flex;
+    flex-direction: row;
+    flex-basis: 90%;
+    overflow-y: hidden;
+  }
+}
+@media (max-width: 1024px) {
+  .chart-options-content {
+    flex-direction: column !important;
+  }
+}
+</style>

package/components/common/monitor/advanced/tools/chartOptionsModal/Notification.vue

@@ -1,13 +1,20 @@
 <template>
-  <common-monitor-advanced-tools-chart-options-modal-notification-new
-    v-if="isNewView"
-    :alerts="props.alerts"
-  />
-  <common-monitor-advanced-tools-chart-options-modal-notification-old
-    v-else
-    :alerts="props.alerts"
-    @remove="emits('remove-alerts')"
-  />
+  <atoms-alert
+    v-show="props.alerts.length"
+    status="alert-danger"
+    :items="props.alerts"
+    class="notification"
+    test-id="notification-alert"
+    @remove="onRemove"
+  >
+<!--    <template #default="{ item }">-->
+<!--      <div class="flex-space-between flex-1">-->
+<!--        <div class="flex-align-center">-->
+<!--          <span>{{ item }}</span>-->
+<!--        </div>-->
+<!--      </div>-->
+<!--    </template>-->
+  </atoms-alert>
 </template>
 
 <script setup lang="ts">
@@ -16,12 +23,12 @@ const props = defineProps<{
 }>()
 
 const emits = defineEmits<{
-  (event: 'remove-alerts'): void
+  (event: 'remove'): void
 }>()
 
-const { $store }: any = useNuxtApp()
-
-const isNewView = computed<boolean>(() => $store.getters['main/getIsNewView'])
+const onRemove = (): void => {
+  emits('remove')
+}
 </script>
 
 <style scoped lang="scss"></style>

package/components/common/monitor/advanced/tools/chartOptionsModal/actions/Actions.vue

@@ -1,28 +1,55 @@
 <template>
-  <common-monitor-advanced-tools-chart-options-modal-actions-new
-    v-if="isNewView"
-    v-model:is-confirm-modal="isConfirmModal"
-    v-model:local-selected-chart-option="localSelectedChartOption"
-    :chart-options="chartOptions"
-    :is-disabled-delete-action="isDisabledDeleteAction"
-    :confirm-modal-desc="confirmModalDesc"
-    @save-options="onSaveOptions"
-    @delete-action="onDeleteAction"
-    @apply-delete="onApplyDelete"
-  />
-  <common-monitor-advanced-tools-chart-options-modal-actions-old
-    v-else
-    v-model:is-confirm-modal="isConfirmModal"
-    v-model:local-selected-chart-option="localSelectedChartOption"
-    :chart-options="chartOptions"
-    :is-show-save-options-modal="isShowSaveOptionsModal"
-    :is-disabled-delete-action="isDisabledDeleteAction"
-    :confirm-modal-desc="confirmModalDesc"
-    @show-save-options-modal="onShowSaveOptionsModal"
-    @hide-save-options-modal="onHideSaveOptionsModal"
-    @save-options="onSaveOptions"
-    @delete-action="onDeleteAction"
-    @apply-delete="onApplyDelete"
+  <div class="horizontal-flex-container">
+    <div class="horizontal-flex-container">
+      <label for="chartOptionsSelect" class="label-select"
+        >{{ localization.inventoryMonitor.chartOptions }}:</label
+      >
+      <div class="select">
+        <select
+          id="chartOptionsSelect"
+          v-model="localSelectedChartOption"
+          data-id="chart-options-select"
+        >
+          <option
+            v-for="item in chartOptions"
+            :key="item.value"
+            :value="item.value"
+          >
+            {{ item.text }}
+          </option>
+        </select>
+      </div>
+    </div>
+    <div>
+      <button
+        class="btn chart-options-save-button"
+        data-id="chart-options-save-button"
+        @click="onShowSaveOptionsModal"
+      >
+        {{ localization.inventoryMonitor.saveOptionsAs }}...
+      </button>
+      <common-monitor-advanced-tools-chart-options-modal-actions-save-options-modal
+        v-if="isShowSaveOptionsModal"
+        @hide="onHideSaveOptionsModal"
+        @save="onSaveOptions"
+      />
+      <button
+        class="btn chart-options-delete-button"
+        :disabled="!disabledDeleteAction"
+        data-id="chart-options-delete-button"
+        @click="onDeleteAction"
+      >
+        {{ localization.inventoryMonitor.deleteOptions }}
+      </button>
+    </div>
+  </div>
+
+  <common-modals-confirmation
+    v-if="isConfirmModal"
+    :headline="localization.inventoryMonitor.deletingSavedSettings"
+    :description="confirmModalDesc"
+    @hide-modal="isConfirmModal = false"
+    @confirm="onApplyDelete"
   />
 </template>
 
@@ -44,14 +71,10 @@ const emits = defineEmits<{
   (event: 'delete-chart-name', value: string): void
 }>()
 
-const { $store }: any = useNuxtApp()
-
-const isNewView = computed<boolean>(() => $store.getters['main/getIsNewView'])
-
 const localization = computed<UI_I_Localization>(() => useLocal())
 
 const localSelectedChartOption = ref<string>('select_options')
-const isDisabledDeleteAction = computed<boolean>(() => {
+const disabledDeleteAction = computed<boolean>(() => {
   const chartOptionName = localSelectedChartOption.value
   let result = false
 
@@ -111,4 +134,24 @@ const onApplyDelete = (): void => {
 }
 </script>
 
-<style scoped lang="scss"></style>
+<style scoped lang="scss">
+.horizontal-flex-container {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+
+  .chart-options-save-button,
+  .chart-options-delete-button {
+    border: none;
+    background: unset;
+    margin: 0;
+    font-size: 11px;
+    color: var(--action-icon-color);
+    box-shadow: unset;
+  }
+
+  .chart-options-delete-button {
+    text-transform: uppercase;
+  }
+}
+</style>

package/components/common/monitor/advanced/tools/chartOptionsModal/counters/Counters.vue

@@ -1,74 +1,46 @@
 <template>
-  <common-monitor-advanced-tools-chart-options-modal-counters-new
-    v-if="isNewView"
-    v-model:total-metric-items="totalMetricItems"
-    :chart="props.chart"
-    :language="props.language"
-    :type="props.type"
-    :selected-keys="props.selectedKeys"
-    :selected-chart-type="props.selectedChartType"
-    :selected-timespan-type="props.selectedTimespanType"
-    :units-count="props.unitsCount"
-    :period-type="props.periodType"
-    :selected-custom-time="props.selectedCustomTime"
-    :custom-date-from="props.customDateFrom"
-    :custom-date-to="props.customDateTo"
-    :custom-time-from="props.customTimeFrom"
-    :custom-time-to="props.customTimeTo"
-    :total-cores="props.totalCores"
-    :host-id="props.hostId"
-    :selected-metrics-keys="props.selectedMetricsKeys"
-    :selected-objects="props.selectedObjects"
-    :objects-loading="props.objectsLoading"
-    :objects-data="props.objectsData"
-    :valid-date-end="props.validDateEnd"
-    @select-row="emits('select-row', $event)"
-    @update-chart-type="emits('update-chart-type', $event)"
-    @update-custom-time="emits('update-custom-time', $event)"
-    @update-timespan-type="emits('update-timespan-type', $event)"
-    @update-unit-count="emits('update-unit-count', $event)"
-    @update-period-type="emits('update-period-type', $event)"
-    @update-custom-date-from="emits('update-custom-date-from', $event)"
-    @update-custom-date-to="emits('update-custom-date-to', $event)"
-    @update-custom-time-from="emits('update-custom-time-from', $event)"
-    @update-custom-time-to="emits('update-custom-time-to', $event)"
-    @select-objects="emits('select-objects', $event)"
-  />
-  <common-monitor-advanced-tools-chart-options-modal-counters-old
-    v-else
-    v-model:total-metric-items="totalMetricItems"
-    :chart="props.chart"
-    :language="props.language"
-    :type="props.type"
-    :selected-keys="props.selectedKeys"
-    :selected-chart-type="props.selectedChartType"
-    :selected-timespan-type="props.selectedTimespanType"
-    :units-count="props.unitsCount"
-    :period-type="props.periodType"
-    :selected-custom-time="props.selectedCustomTime"
-    :custom-date-from="props.customDateFrom"
-    :custom-date-to="props.customDateTo"
-    :custom-time-from="props.customTimeFrom"
-    :custom-time-to="props.customTimeTo"
-    :total-cores="props.totalCores"
-    :host-id="props.hostId"
-    :selected-metrics-keys="props.selectedMetricsKeys"
-    :selected-objects="props.selectedObjects"
-    :objects-loading="props.objectsLoading"
-    :objects-data="props.objectsData"
-    :valid-date-end="props.validDateEnd"
-    @select-row="emits('select-row', $event)"
-    @update-chart-type="emits('update-chart-type', $event)"
-    @update-custom-time="emits('update-custom-time', $event)"
-    @update-timespan-type="emits('update-timespan-type', $event)"
-    @update-unit-count="emits('update-unit-count', $event)"
-    @update-period-type="emits('update-period-type', $event)"
-    @update-custom-date-from="emits('update-custom-date-from', $event)"
-    @update-custom-date-to="emits('update-custom-date-to', $event)"
-    @update-custom-time-from="emits('update-custom-time-from', $event)"
-    @update-custom-time-to="emits('update-custom-time-to', $event)"
-    @select-objects="emits('select-objects', $event)"
-  />
+  <div class="vertical-flex-container chart-option-counters-container">
+    <common-monitor-advanced-tools-chart-options-modal-counters-table
+      :chart="props.chart"
+      :type="props.type"
+      :selected-keys="props.selectedKeys"
+      :total-cores="props.totalCores"
+      @select-row="emits('select-row', $event)"
+      @total-items="totalMetricItems = $event"
+    />
+    <common-monitor-advanced-tools-chart-options-modal-counters-timespan
+      :type="props.type"
+      :chart="props.chart"
+      :language="props.language"
+      :selected-chart-type="props.selectedChartType"
+      :selected-timespan-type="props.selectedTimespanType"
+      :units-count="props.unitsCount"
+      :period-type="props.periodType"
+      :selected-custom-time="props.selectedCustomTime"
+      :custom-date-from="props.customDateFrom"
+      :custom-date-to="props.customDateTo"
+      :custom-time-from="props.customTimeFrom"
+      :custom-time-to="props.customTimeTo"
+      :total-cores="props.totalCores"
+      :host-id="props.hostId"
+      :selected-metrics-keys="props.selectedMetricsKeys"
+      :total-metric-items="totalMetricItems"
+      :selected-objects="props.selectedObjects"
+      :objects-loading="props.objectsLoading"
+      :objects-data="props.objectsData"
+      :valid-date-end="props.validDateEnd"
+      @update-chart-type="emits('update-chart-type', $event)"
+      @update-custom-time="emits('update-custom-time', $event)"
+      @update-timespan-type="emits('update-timespan-type', $event)"
+      @update-unit-count="emits('update-unit-count', $event)"
+      @update-period-type="emits('update-period-type', $event)"
+      @update-custom-date-from="emits('update-custom-date-from', $event)"
+      @update-custom-date-to="emits('update-custom-date-to', $event)"
+      @update-custom-time-from="emits('update-custom-time-from', $event)"
+      @update-custom-time-to="emits('update-custom-time-to', $event)"
+      @select-objects="emits('select-objects', $event)"
+    />
+  </div>
 </template>
 
 <script setup lang="ts">
@@ -117,11 +89,20 @@ const emits = defineEmits<{
   (event: 'select-objects', value: string): void
 }>()
 
-const { $store }: any = useNuxtApp()
-
-const isNewView = computed<boolean>(() => $store.getters['main/getIsNewView'])
-
 const totalMetricItems = ref<number>(0)
 </script>
 
-<style scoped lang="scss"></style>
+<style scoped lang="scss">
+.chart-option-counters-container {
+  margin-top: 20px;
+  flex-basis: 80%;
+  padding-left: 15px;
+  max-width: 80%;
+}
+@media (max-width: 1024px) {
+  .chart-option-counters-container {
+    max-width: unset;
+    padding-left: 0;
+  }
+}
+</style>