bfg-common 1.1.42 → 1.1.44

package/components/common/monitor/advanced/tools/chartOptionsModal/counters/timespan/form/Form.vue

@@ -1,484 +1,484 @@
-<template>
-  <div class="chart-option-timespan-split">
-    <div class="vertical-flex-container">
-      <div class="timespan-objects-section-direction">
-        <label for="chart-timespan-type-select"
-          >{{ localization.timespan }}:</label
-        >
-        <div class="vertical-flex-container chart-option-timespan-settings">
-          <div class="timespan-select chart-option-setting-row">
-            <div class="view-select-label horizontal-flex-container">
-              <div class="select">
-                <select
-                  id="chart-timespan-type-select"
-                  v-model="localSelectedTimespan"
-                >
-                  <option
-                    v-for="(item, index) in timespanOptions"
-                    :key="index"
-                    :value="item.value"
-                  >
-                    {{ item.text }}
-                  </option>
-                </select>
-              </div>
-            </div>
-          </div>
-          <div
-            :class="[
-              'custom-timespan-settings-container',
-              { active: localSelectedTimespan === 'custom_interval' },
-            ]"
-          >
-            <table>
-              <tbody>
-                <tr>
-                  <td class="relative">
-                    <input
-                      id="custom-time-lastInput"
-                      v-model="localPeriodType"
-                      type="radio"
-                      value="last"
-                      class="custom-radio-button"
-                      name="lastFrom"
-                    />
-                    <label
-                      for="custom-time-lastInput"
-                      class="custom-radio-label"
-                      >{{ localization.last }}:
-                    </label>
-                  </td>
-                  <td>
-                    <div
-                      :class="[
-                        'custom-timespan-type-last-container',
-                        { active: localPeriodType === 'last' },
-                      ]"
-                    >
-                      <input
-                        id="chart-option-setting-row"
-                        v-model="localLast"
-                        type="number"
-                        class="chart-option-setting-row custom-time-input"
-                      />
-                      <div
-                        class="chart-option-setting-row custom-time-input inline-block"
-                      >
-                        <div
-                          class="view-select-label horizontal-flex-container"
-                        >
-                          <div class="select">
-                            <select
-                              id="chart-timespan-type-select"
-                              v-model="localSelectedCustomTime"
-                            >
-                              <option
-                                v-for="(item, index) in customTimeOptions"
-                                :key="index"
-                                :value="item.value"
-                              >
-                                {{ item.text }}
-                              </option>
-                            </select>
-                          </div>
-                        </div>
-                      </div>
-                    </div>
-                  </td>
-                </tr>
-                <tr>
-                  <td class="relative">
-                    <input
-                      id="custom-time-fromInput"
-                      v-model="localPeriodType"
-                      type="radio"
-                      value="period"
-                      class="custom-radio-button"
-                      name="lastFrom"
-                    />
-                    <label
-                      for="custom-time-fromInput"
-                      class="custom-radio-label text-capitalize text-right"
-                      >{{ localization.from }}:
-                    </label>
-                  </td>
-                  <td>
-                    <div
-                      :class="[
-                        'date-container-row disabled-container calendar-date-row',
-                        { active: localPeriodType === 'period' },
-                      ]"
-                    >
-                      <input
-                        id="current-date-from"
-                        v-model.lazy="currentDateFrom"
-                        type="text"
-                        class="chart-option-setting-row custom-time-input first-from"
-                      />
-                      <div class="section-datepicker">
-                        <atoms-datepicker
-                          v-model="dateFrom"
-                          :lang="props.language"
-                          class="calendar-from calendar-popup btn-show-hide-calendar"
-                          @update="onUpdateDateFrom"
-                        />
-                      </div>
-                      <input
-                        id="current-time-from"
-                        v-model="currentTimeFrom"
-                        type="text"
-                        class="chart-option-setting-row custom-time-input"
-                      />
-                    </div>
-                  </td>
-                </tr>
-                <tr>
-                  <td class="custom-time-label-text text-right">
-                    {{ localization.to }}:
-                  </td>
-                  <td>
-                    <div
-                      :class="[
-                        'date-container-row disabled-container calendar-date-row',
-                        { active: localPeriodType === 'period' },
-                      ]"
-                    >
-                      <input
-                        id="current-date-to"
-                        v-model.lazy="currentDateTo"
-                        type="text"
-                        class="chart-option-setting-row custom-time-input first-to"
-                      />
-                      <div class="section-datepicker">
-                        <atoms-datepicker
-                          v-model="dateTo"
-                          :lang="props.language"
-                          class="calendar-from calendar-popup btn-show-hide-calendar"
-                          @update="onUpdateDateTo"
-                        />
-                      </div>
-                      <input
-                        id="current-time-to"
-                        v-model="currentTimeTo"
-                        type="text"
-                        class="chart-option-setting-row custom-time-input"
-                      />
-                    </div>
-                  </td>
-                </tr>
-                <tr>
-                  <td></td>
-                  <td
-                    :class="[
-                      'disabled-container',
-                      { active: localPeriodType === 'period' },
-                    ]"
-                  >
-                    <span> ({{ localization.isoTimeFormat }}) </span>
-                  </td>
-                </tr>
-              </tbody>
-            </table>
-          </div>
-        </div>
-      </div>
-      <div class="horizontal-flex-container chart-type-container">
-        <div class="view-select-label horizontal-flex-container">
-          <label for="chart-type-select" class="label-select"
-            >{{ localization.chartType }}:</label
-          >
-          <div class="select">
-            <select id="chart-type-select" v-model="chartType">
-              <option
-                v-for="(item, index) in chartTypeOptions"
-                :key="index"
-                :value="item.value"
-              >
-                {{ item.text }}
-              </option>
-            </select>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { format } from 'date-fns'
-import { UI_I_Localization } from '~/models/interfaces'
-import { UI_I_OptionItem } from '~/components/atoms/models/interfaces'
-import {
-  timespanFunc,
-  customTimeFunc,
-  chartTypeFunc,
-} from '~/components/common/monitor/advanced/tools/chartOptionsModal/counters/timespan/form/config/dateForm'
-
-const props = defineProps<{
-  language: string
-  selectedChartType: string
-  selectedTimespanType: string
-  unitsCount: number
-  periodType: string
-  selectedCustomTime: string
-}>()
-
-const emits = defineEmits<{
-  (event: 'update-chart-type', value: string): void
-  (event: 'update-custom-time', value: string): void
-  (event: 'update-timespan-type', value: string): void
-  (event: 'update-unit-count', value: number): void
-  (event: 'update-period-type', value: string): void
-}>()
-
-const { $formattedDate, $isDate, $getTimeFormat, $getUnixByDate } = useNuxtApp()
-
-const localization = computed<UI_I_Localization>(() => useLocal())
-
-const timespanOptions = computed<UI_I_OptionItem[]>(() =>
-  timespanFunc(localization.value)
-)
-const localSelectedTimespan = ref<string>(
-  props.selectedTimespanType || timespanOptions.value[0].value
-)
-watch(
-  () => props.selectedTimespanType,
-  (newValue) => {
-    localSelectedTimespan.value = newValue || timespanOptions.value[0].value
-  }
-)
-const localPeriodType = ref<string>('last')
-watch(
-  () => props.periodType,
-  (newValue) => {
-    localPeriodType.value = newValue || 'last'
-  },
-  { immediate: true }
-)
-
-watch(
-  localSelectedTimespan,
-  (newValue) => {
-    emits('update-timespan-type', newValue)
-  },
-  { immediate: true }
-)
-
-watch(
-  localPeriodType,
-  (newValue) => {
-    const currentValue = newValue || 'period'
-    emits('update-period-type', currentValue)
-  },
-  { immediate: true }
-)
-
-const localLast = ref<number>(1)
-watch(
-  localLast,
-  (newValue) => {
-    emits('update-unit-count', newValue)
-  },
-  { immediate: true }
-)
-watch(
-  () => props.unitsCount,
-  (newValue) => {
-    localLast.value = newValue > 0 ? newValue : 1
-  },
-  { immediate: true }
-)
-
-const localSelectedCustomTime = ref<string>('hours')
-const customTimeOptions = computed<UI_I_OptionItem[]>(() =>
-  customTimeFunc(localization.value)
-)
-watch(
-  () => props.selectedCustomTime,
-  (newValue) => {
-    localSelectedCustomTime.value = newValue || 'hours'
-  },
-  { immediate: true }
-)
-watch(
-  localSelectedCustomTime,
-  (newValue) => {
-    emits('update-custom-time', newValue)
-  },
-  { immediate: true }
-)
-
-const chartType = ref<string>('line_graph')
-const chartTypeOptions = computed<UI_I_OptionItem[]>(() =>
-  chartTypeFunc(localization.value)
-)
-
-const setCurrentChartType = (): void => {
-  const selected = props.selectedChartType
-  let result = 'line_graph'
-
-  if (selected === 'spline') result = 'line_graph'
-  else if (selected === 'area') result = 'stacked_graph'
-
-  chartType.value = result
-}
-
-watch(
-  () => props.selectedChartType,
-  () => {
-    setCurrentChartType()
-  },
-  { immediate: true }
-)
-
-watch(
-  chartType,
-  (newValue) => {
-    let currentValue = 'spline'
-
-    if (newValue === 'line_graph') currentValue = 'spline'
-    else if (newValue === 'stacked_graph') currentValue = 'area'
-
-    emits('update-chart-type', currentValue)
-  },
-  { immediate: true }
-)
-
-const yesterday = new Date().setDate(new Date().getDate() - 1)
-const dateFrom = ref<number>(yesterday)
-const dateTo = ref<number>(new Date().getTime())
-
-const currentDateFrom = ref<string>('')
-const currentDateTo = ref<string>('')
-const currentTimeFrom = ref<string>('')
-const currentTimeTo = ref<string>('')
-
-const getCurrentTime = (): void => {
-  currentDateFrom.value = $formattedDate(yesterday, '')
-  currentDateTo.value = $formattedDate(new Date(), '')
-
-  const currentTime = format(new Date(), $getTimeFormat(true))
-  currentTimeFrom.value = currentTime
-  currentTimeTo.value = currentTime
-}
-
-const onUpdateDateFrom = (val: number): void => {
-  if (!val) return
-
-  currentDateFrom.value = $formattedDate(new Date(val), '')
-}
-watch(currentDateFrom, (newValue) => {
-  if (!newValue) return
-
-  if ($isDate(newValue)) dateFrom.value = $getUnixByDate(newValue)
-})
-
-const onUpdateDateTo = (val: number): void => {
-  if (!val) return
-
-  currentDateTo.value = $formattedDate(new Date(val), '')
-}
-watch(currentDateTo, (newValue) => {
-  if (!newValue) return
-
-  if ($isDate(newValue)) dateTo.value = $getUnixByDate(newValue)
-})
-
-onMounted(() => {
-  getCurrentTime()
-})
-</script>
-
-<style scoped lang="scss">
-.chart-option-timespan-split {
-  overflow-x: auto;
-  flex-basis: 56%;
-  padding: 5px;
-
-  .timespan-objects-section-direction {
-    display: flex;
-    flex-direction: row;
-    align-items: flex-start;
-
-    .chart-option-timespan-settings {
-      margin-left: 15px;
-
-      .chart-option-setting-row {
-        width: 150px;
-        margin-bottom: 5px;
-      }
-
-      .custom-radio-button {
-        position: absolute;
-        opacity: 0;
-
-        &:checked + .custom-radio-label:before {
-          box-shadow: inset 0 0 0 6px #0079b8;
-          border: none;
-        }
-      }
-      .custom-radio-label {
-        display: block;
-        position: relative;
-        min-height: 19.2px;
-        padding-left: 23px;
-        cursor: pointer;
-        line-height: 19.2px;
-        color: #454545;
-
-        &:before {
-          position: absolute;
-          top: 3px;
-          left: 0;
-          content: '';
-          display: inline-block;
-          height: 16px;
-          width: 16px;
-          border: 0.8px solid #565656;
-          border-radius: 50%;
-        }
-      }
-
-      .calendar-date-row {
-        display: flex;
-        align-items: center;
-
-        .custom-time-input.first-from,
-        .custom-time-input.first-to {
-          max-width: 114px;
-        }
-        .btn-show-hide-calendar {
-          margin: 0 9px;
-          cursor: pointer;
-        }
-      }
-
-      .custom-time-input {
-        margin-left: 8px;
-        margin-right: 8px;
-        max-width: 140px;
-      }
-    }
-
-    .custom-timespan-settings-container:not(.active),
-    .custom-timespan-type-last-container:not(.active),
-    .disabled-container:not(.active) {
-      opacity: 0.6;
-      pointer-events: none;
-    }
-  }
-
-  .chart-type-container {
-    margin-top: 15px;
-
-    .horizontal-flex-container {
-      display: flex;
-      flex-direction: row;
-
-      .select {
-        margin-left: 15px;
-      }
-    }
-  }
-}
-</style>
+<template>
+  <div class="chart-option-timespan-split">
+    <div class="vertical-flex-container">
+      <div class="timespan-objects-section-direction">
+        <label for="chart-timespan-type-select"
+          >{{ localization.timespan }}:</label
+        >
+        <div class="vertical-flex-container chart-option-timespan-settings">
+          <div class="timespan-select chart-option-setting-row">
+            <div class="view-select-label horizontal-flex-container">
+              <div class="select">
+                <select
+                  id="chart-timespan-type-select"
+                  v-model="localSelectedTimespan"
+                >
+                  <option
+                    v-for="(item, index) in timespanOptions"
+                    :key="index"
+                    :value="item.value"
+                  >
+                    {{ item.text }}
+                  </option>
+                </select>
+              </div>
+            </div>
+          </div>
+          <div
+            :class="[
+              'custom-timespan-settings-container',
+              { active: localSelectedTimespan === 'custom_interval' },
+            ]"
+          >
+            <table>
+              <tbody>
+                <tr>
+                  <td class="relative">
+                    <input
+                      id="custom-time-lastInput"
+                      v-model="localPeriodType"
+                      type="radio"
+                      value="last"
+                      class="custom-radio-button"
+                      name="lastFrom"
+                    />
+                    <label
+                      for="custom-time-lastInput"
+                      class="custom-radio-label"
+                      >{{ localization.last }}:
+                    </label>
+                  </td>
+                  <td>
+                    <div
+                      :class="[
+                        'custom-timespan-type-last-container',
+                        { active: localPeriodType === 'last' },
+                      ]"
+                    >
+                      <input
+                        id="chart-option-setting-row"
+                        v-model="localLast"
+                        type="number"
+                        class="chart-option-setting-row custom-time-input"
+                      />
+                      <div
+                        class="chart-option-setting-row custom-time-input inline-block"
+                      >
+                        <div
+                          class="view-select-label horizontal-flex-container"
+                        >
+                          <div class="select">
+                            <select
+                              id="chart-timespan-type-select"
+                              v-model="localSelectedCustomTime"
+                            >
+                              <option
+                                v-for="(item, index) in customTimeOptions"
+                                :key="index"
+                                :value="item.value"
+                              >
+                                {{ item.text }}
+                              </option>
+                            </select>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </td>
+                </tr>
+                <tr>
+                  <td class="relative">
+                    <input
+                      id="custom-time-fromInput"
+                      v-model="localPeriodType"
+                      type="radio"
+                      value="period"
+                      class="custom-radio-button"
+                      name="lastFrom"
+                    />
+                    <label
+                      for="custom-time-fromInput"
+                      class="custom-radio-label text-capitalize text-right"
+                      >{{ localization.from }}:
+                    </label>
+                  </td>
+                  <td>
+                    <div
+                      :class="[
+                        'date-container-row disabled-container calendar-date-row',
+                        { active: localPeriodType === 'period' },
+                      ]"
+                    >
+                      <input
+                        id="current-date-from"
+                        v-model.lazy="currentDateFrom"
+                        type="text"
+                        class="chart-option-setting-row custom-time-input first-from"
+                      />
+                      <div class="section-datepicker">
+                        <atoms-datepicker
+                          v-model="dateFrom"
+                          :lang="props.language"
+                          class="calendar-from calendar-popup btn-show-hide-calendar"
+                          @update="onUpdateDateFrom"
+                        />
+                      </div>
+                      <input
+                        id="current-time-from"
+                        v-model="currentTimeFrom"
+                        type="text"
+                        class="chart-option-setting-row custom-time-input"
+                      />
+                    </div>
+                  </td>
+                </tr>
+                <tr>
+                  <td class="custom-time-label-text text-right">
+                    {{ localization.to }}:
+                  </td>
+                  <td>
+                    <div
+                      :class="[
+                        'date-container-row disabled-container calendar-date-row',
+                        { active: localPeriodType === 'period' },
+                      ]"
+                    >
+                      <input
+                        id="current-date-to"
+                        v-model.lazy="currentDateTo"
+                        type="text"
+                        class="chart-option-setting-row custom-time-input first-to"
+                      />
+                      <div class="section-datepicker">
+                        <atoms-datepicker
+                          v-model="dateTo"
+                          :lang="props.language"
+                          class="calendar-from calendar-popup btn-show-hide-calendar"
+                          @update="onUpdateDateTo"
+                        />
+                      </div>
+                      <input
+                        id="current-time-to"
+                        v-model="currentTimeTo"
+                        type="text"
+                        class="chart-option-setting-row custom-time-input"
+                      />
+                    </div>
+                  </td>
+                </tr>
+                <tr>
+                  <td></td>
+                  <td
+                    :class="[
+                      'disabled-container',
+                      { active: localPeriodType === 'period' },
+                    ]"
+                  >
+                    <span> ({{ localization.isoTimeFormat }}) </span>
+                  </td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+        </div>
+      </div>
+      <div class="horizontal-flex-container chart-type-container">
+        <div class="view-select-label horizontal-flex-container">
+          <label for="chart-type-select" class="label-select"
+            >{{ localization.chartType }}:</label
+          >
+          <div class="select">
+            <select id="chart-type-select" v-model="chartType">
+              <option
+                v-for="(item, index) in chartTypeOptions"
+                :key="index"
+                :value="item.value"
+              >
+                {{ item.text }}
+              </option>
+            </select>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { format } from 'date-fns'
+import { UI_I_Localization } from '~/models/interfaces'
+import { UI_I_OptionItem } from '~/components/atoms/models/interfaces'
+import {
+  timespanFunc,
+  customTimeFunc,
+  chartTypeFunc,
+} from '~/components/common/monitor/advanced/tools/chartOptionsModal/counters/timespan/form/config/dateForm'
+
+const props = defineProps<{
+  language: string
+  selectedChartType: string
+  selectedTimespanType: string
+  unitsCount: number
+  periodType: string
+  selectedCustomTime: string
+}>()
+
+const emits = defineEmits<{
+  (event: 'update-chart-type', value: string): void
+  (event: 'update-custom-time', value: string): void
+  (event: 'update-timespan-type', value: string): void
+  (event: 'update-unit-count', value: number): void
+  (event: 'update-period-type', value: string): void
+}>()
+
+const { $formattedDate, $isDate, $getTimeFormat, $getUnixByDate } = useNuxtApp()
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+
+const timespanOptions = computed<UI_I_OptionItem[]>(() =>
+  timespanFunc(localization.value)
+)
+const localSelectedTimespan = ref<string>(
+  props.selectedTimespanType || timespanOptions.value[0].value
+)
+watch(
+  () => props.selectedTimespanType,
+  (newValue) => {
+    localSelectedTimespan.value = newValue || timespanOptions.value[0].value
+  }
+)
+const localPeriodType = ref<string>('last')
+watch(
+  () => props.periodType,
+  (newValue) => {
+    localPeriodType.value = newValue || 'last'
+  },
+  { immediate: true }
+)
+
+watch(
+  localSelectedTimespan,
+  (newValue) => {
+    emits('update-timespan-type', newValue)
+  },
+  { immediate: true }
+)
+
+watch(
+  localPeriodType,
+  (newValue) => {
+    const currentValue = newValue || 'period'
+    emits('update-period-type', currentValue)
+  },
+  { immediate: true }
+)
+
+const localLast = ref<number>(1)
+watch(
+  localLast,
+  (newValue) => {
+    emits('update-unit-count', newValue)
+  },
+  { immediate: true }
+)
+watch(
+  () => props.unitsCount,
+  (newValue) => {
+    localLast.value = newValue > 0 ? newValue : 1
+  },
+  { immediate: true }
+)
+
+const localSelectedCustomTime = ref<string>('hours')
+const customTimeOptions = computed<UI_I_OptionItem[]>(() =>
+  customTimeFunc(localization.value)
+)
+watch(
+  () => props.selectedCustomTime,
+  (newValue) => {
+    localSelectedCustomTime.value = newValue || 'hours'
+  },
+  { immediate: true }
+)
+watch(
+  localSelectedCustomTime,
+  (newValue) => {
+    emits('update-custom-time', newValue)
+  },
+  { immediate: true }
+)
+
+const chartType = ref<string>('line_graph')
+const chartTypeOptions = computed<UI_I_OptionItem[]>(() =>
+  chartTypeFunc(localization.value)
+)
+
+const setCurrentChartType = (): void => {
+  const selected = props.selectedChartType
+  let result = 'line_graph'
+
+  if (selected === 'spline') result = 'line_graph'
+  else if (selected === 'area') result = 'stacked_graph'
+
+  chartType.value = result
+}
+
+watch(
+  () => props.selectedChartType,
+  () => {
+    setCurrentChartType()
+  },
+  { immediate: true }
+)
+
+watch(
+  chartType,
+  (newValue) => {
+    let currentValue = 'spline'
+
+    if (newValue === 'line_graph') currentValue = 'spline'
+    else if (newValue === 'stacked_graph') currentValue = 'area'
+
+    emits('update-chart-type', currentValue)
+  },
+  { immediate: true }
+)
+
+const yesterday = new Date().setDate(new Date().getDate() - 1)
+const dateFrom = ref<number>(yesterday)
+const dateTo = ref<number>(new Date().getTime())
+
+const currentDateFrom = ref<string>('')
+const currentDateTo = ref<string>('')
+const currentTimeFrom = ref<string>('')
+const currentTimeTo = ref<string>('')
+
+const getCurrentTime = (): void => {
+  currentDateFrom.value = $formattedDate(yesterday, '')
+  currentDateTo.value = $formattedDate(new Date(), '')
+
+  const currentTime = format(new Date(), $getTimeFormat(true))
+  currentTimeFrom.value = currentTime
+  currentTimeTo.value = currentTime
+}
+
+const onUpdateDateFrom = (val: number): void => {
+  if (!val) return
+
+  currentDateFrom.value = $formattedDate(new Date(val), '')
+}
+watch(currentDateFrom, (newValue) => {
+  if (!newValue) return
+
+  if ($isDate(newValue)) dateFrom.value = $getUnixByDate(newValue)
+})
+
+const onUpdateDateTo = (val: number): void => {
+  if (!val) return
+
+  currentDateTo.value = $formattedDate(new Date(val), '')
+}
+watch(currentDateTo, (newValue) => {
+  if (!newValue) return
+
+  if ($isDate(newValue)) dateTo.value = $getUnixByDate(newValue)
+})
+
+onMounted(() => {
+  getCurrentTime()
+})
+</script>
+
+<style scoped lang="scss">
+.chart-option-timespan-split {
+  overflow-x: auto;
+  flex-basis: 56%;
+  padding: 5px;
+
+  .timespan-objects-section-direction {
+    display: flex;
+    flex-direction: row;
+    align-items: flex-start;
+
+    .chart-option-timespan-settings {
+      margin-left: 15px;
+
+      .chart-option-setting-row {
+        width: 150px;
+        margin-bottom: 5px;
+      }
+
+      .custom-radio-button {
+        position: absolute;
+        opacity: 0;
+
+        &:checked + .custom-radio-label:before {
+          box-shadow: inset 0 0 0 6px #0079b8;
+          border: none;
+        }
+      }
+      .custom-radio-label {
+        display: block;
+        position: relative;
+        min-height: 19.2px;
+        padding-left: 23px;
+        cursor: pointer;
+        line-height: 19.2px;
+        color: #454545;
+
+        &:before {
+          position: absolute;
+          top: 3px;
+          left: 0;
+          content: '';
+          display: inline-block;
+          height: 16px;
+          width: 16px;
+          border: 0.8px solid #565656;
+          border-radius: 50%;
+        }
+      }
+
+      .calendar-date-row {
+        display: flex;
+        align-items: center;
+
+        .custom-time-input.first-from,
+        .custom-time-input.first-to {
+          max-width: 114px;
+        }
+        .btn-show-hide-calendar {
+          margin: 0 9px;
+          cursor: pointer;
+        }
+      }
+
+      .custom-time-input {
+        margin-left: 8px;
+        margin-right: 8px;
+        max-width: 140px;
+      }
+    }
+
+    .custom-timespan-settings-container:not(.active),
+    .custom-timespan-type-last-container:not(.active),
+    .disabled-container:not(.active) {
+      opacity: 0.6;
+      pointer-events: none;
+    }
+  }
+
+  .chart-type-container {
+    margin-top: 15px;
+
+    .horizontal-flex-container {
+      display: flex;
+      flex-direction: row;
+
+      .select {
+        margin-left: 15px;
+      }
+    }
+  }
+}
+</style>