@sigmaott/base-next 1.4.0 → 1.4.2

package/src/components/FilterQuerySchema/Tag.vue

@@ -1,68 +1,68 @@
-<script lang="ts" setup>
-import type { JsonGroup, JsonRule } from '../QueryBuilder/types'
-import { defaultConfig } from '../QueryBuilder/utils/index'
-
-const props = defineProps<{ queryGroup: JsonGroup }>()
-const emit = defineEmits(['delete', 'edit'])
-
-const { t } = useI18n()
-const queryGroup = useVModel(props, 'queryGroup')
-
-function onRemoveQuery(index: number) {
-  queryGroup.value.rules.splice(index, 1)
-  emit('delete', index)
-}
-
-const queryTagList = computed(() => {
-  return queryGroup.value.rules.filter((query: JsonRule) => query.field && query.operator)
-})
-
-function isNullValue(operator: string) {
-  return !['is_empty', 'is_not_empty', 'is_null', 'is_not_null'].includes(operator)
-}
-
-function mapValue(value: string[], input: string) {
-  switch (value.length) {
-    case 0:
-      if (['select', 'multiselect'].includes(input))
-        return []
-      return ''
-    case 1:
-      if (value[0] === '' || value[0] === null)
-        return
-
-      if (['select', 'multiselect'].includes(input))
-        return `[ ${value[0]} ]`
-      if (['datetime', 'date'].includes(input)) {
-        return value[0].length === 2
-          ? `[ ${formatDateTime(value[0][0])} -> ${formatDateTime(value[0][1])} ]`
-          : formatDateTime(value[0])
-      }
-
-      return value[0]
-    default:
-      return value
-  }
-}
-</script>
-
-<template>
-  <el-tag v-for="(query, idx) in queryTagList" :key="query.id" type="info" class="tag-query" closable @close="onRemoveQuery(idx)">
-    <span class="cursor-pointer" @click="emit('edit')">
-      <span class="mr-1 font-semibold">{{ query.label || query.field }}</span>
-      <span class="mr-1 text-red-500">{{ t(`Filter.operator.${defaultConfig.operators[query.operator].type}`) }}</span>
-      <span v-if="isNullValue(query.operator)" class="text-green-500">
-        "{{ mapValue(query.value, query.input) }}"
-      </span>
-    </span>
-  </el-tag>
-</template>
-
-<style>
-  .tag-query .el-tag__content{
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    width: 100%;
-  }
-</style>
+<script lang="ts" setup>
+import type { JsonGroup, JsonRule } from '../QueryBuilder/types'
+import { defaultConfig } from '../QueryBuilder/utils/index'
+
+const props = defineProps<{ queryGroup: JsonGroup }>()
+const emit = defineEmits(['delete', 'edit'])
+
+const { t } = useI18n()
+const queryGroup = useVModel(props, 'queryGroup')
+
+function onRemoveQuery(index: number) {
+  queryGroup.value.rules.splice(index, 1)
+  emit('delete', index)
+}
+
+const queryTagList = computed(() => {
+  return queryGroup.value.rules.filter((query: JsonRule) => query.field && query.operator)
+})
+
+function isNullValue(operator: string) {
+  return !['is_empty', 'is_not_empty', 'is_null', 'is_not_null'].includes(operator)
+}
+
+function mapValue(value: string[], input: string) {
+  switch (value.length) {
+    case 0:
+      if (['select', 'multiselect'].includes(input))
+        return []
+      return ''
+    case 1:
+      if (value[0] === '' || value[0] === null)
+        return
+
+      if (['select', 'multiselect'].includes(input))
+        return `[ ${value[0]} ]`
+      if (['datetime', 'date'].includes(input)) {
+        return value[0].length === 2
+          ? `[ ${formatDateTime(value[0][0])} -> ${formatDateTime(value[0][1])} ]`
+          : formatDateTime(value[0])
+      }
+
+      return value[0]
+    default:
+      return value
+  }
+}
+</script>
+
+<template>
+  <el-tag v-for="(query, idx) in queryTagList" :key="query.id" type="info" class="tag-query" closable @close="onRemoveQuery(idx)">
+    <span class="cursor-pointer" @click="emit('edit')">
+      <span class="mr-1 font-semibold">{{ query.label || query.field }}</span>
+      <span class="mr-1 text-red-500">{{ t(`Filter.operator.${defaultConfig.operators[query.operator].type}`) }}</span>
+      <span v-if="isNullValue(query.operator)" class="text-green-500">
+        "{{ mapValue(query.value, query.input) }}"
+      </span>
+    </span>
+  </el-tag>
+</template>
+
+<style>
+  .tag-query .el-tag__content{
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    width: 100%;
+  }
+</style>

package/src/components/FilterTimeDimensions.vue

@@ -1,265 +1,265 @@
-<script setup lang="ts">
-import type { TimeDimension } from '@cubejs-client/core'
-import { dayjs } from 'element-plus'
-import type { TimeRange } from '@/constants/filterable'
-
-const props = withDefaults(defineProps<{
-  hideTimeUnit?: boolean
-  hideTimeRange?: boolean
-  dateType: 'datetimerange' | 'daterange'
-  title?: string
-  rangeDefault?: string
-  maxDays?: number
-  timeRange: string
-}>(), {
-  hideTimeUnit: false,
-  hideTimeRange: false,
-  dateType: 'datetimerange',
-  rangeDefault: 'Today',
-  maxDays: 90,
-})
-const emit = defineEmits<{
-  (e: 'update:time-range', value: string): void
-  (e: 'update:modelValue', value: TimeDimension): void
-}>()
-
-const { modelValue: timeDimensionQuery } = defineModels<{
-  modelValue: TimeDimension
-}>()
-
-const { t } = useI18n()
-
-const timeRange = useVModel(props, 'timeRange', emit, { defaultValue: props.rangeDefault, passive: true })
-const timeDimensionForm = reactive<TimeDimension>({
-  dimension: timeDimensionQuery.value.dimension,
-  granularity: timeDimensionQuery.value.granularity || 'day',
-  dateRange: timeDimensionQuery.value.dateRange,
-})
-
-function getDateRangeFromTime(dateRange: TimeRange) {
-  const now = dayjs().tz(TIMEZONE_USER.value)
-  let query: [string, string]
-
-  switch (dateRange) {
-    case 'Today':
-      query = [
-        now.startOf('day').format('YYYY-MM-DDTHH:mm:ss'),
-        now.endOf('day').format('YYYY-MM-DDTHH:mm:ss'),
-      ]
-      break
-    case 'Yesterday':
-      query = [
-        now.subtract(1, 'day').startOf('day').format('YYYY-MM-DDTHH:mm:ss'),
-        now.subtract(1, 'day').endOf('day').format('YYYY-MM-DDTHH:mm:ss'),
-      ]
-      break
-    case 'This week':
-      query = [
-        now.startOf('week').startOf('day').format('YYYY-MM-DDTHH:mm:ss'),
-        now.endOf('week').endOf('day').format('YYYY-MM-DDTHH:mm:ss'),
-      ]
-      break
-    case 'This month':
-      query = [
-        now.startOf('month').startOf('day').format('YYYY-MM-DDTHH:mm:ss'),
-        now.endOf('month').endOf('day').format('YYYY-MM-DDTHH:mm:ss'),
-      ]
-      break
-    case 'Last 7 days':
-      query = [
-        now.subtract(7, 'day').startOf('day').format('YYYY-MM-DDTHH:mm:ss'),
-        now.subtract(1, 'day').endOf('day').format('YYYY-MM-DDTHH:mm:ss'),
-      ]
-      break
-    case 'last_14_days':
-      query = [
-        now.subtract(14, 'day').startOf('day').format('YYYY-MM-DDTHH:mm:ss'),
-        now.subtract(1, 'day').endOf('day').format('YYYY-MM-DDTHH:mm:ss'),
-      ]
-      break
-    case 'Last 30 days':
-      query = [
-        now.subtract(30, 'day').startOf('day').format('YYYY-MM-DDTHH:mm:ss'),
-        now.subtract(1, 'day').endOf('day').format('YYYY-MM-DDTHH:mm:ss'),
-      ]
-      break
-    default:
-      query = [
-        now.subtract(6, 'day').startOf('day').format('YYYY-MM-DDTHH:mm:ss'),
-        now.endOf('day').format('YYYY-MM-DDTHH:mm:ss'), // Lấy hết ngày hôm nay
-      ]
-      break
-  }
-
-  const timeRangeEpg = ref([0, 23])
-  query[0] = formatTime(`${query[0].split('T')[0]} ${timeRangeEpg.value[0]}:00:00`)
-  query[1] = formatTime(`${query[1].split('T')[0]} ${timeRangeEpg.value[1]}:59:59`)
-
-  return query
-}
-
-const isTimeRangeToday = computed(() => {
-  return ['Today', 'Yesterday'].includes(timeRange.value)
-})
-
-// granularity
-const TimeUnitOpts = computed(() => {
-  return TimeUnitOptions.map((time) => {
-    if (isTimeRangeToday.value && time.value === 'hour')
-      return { ...time, disabled: false }
-
-    if (['custom', 'This month'].includes(timeRange.value) && time.value === 'month')
-      return { ...time, disabled: false }
-
-    return time
-  })
-})
-
-watch(timeDimensionForm, (newValue) => {
-  if (props.hideTimeUnit)
-    newValue.granularity = undefined
-
-  timeDimensionQuery.value = newValue
-  emit('update:modelValue', timeDimensionQuery.value)
-}, { deep: true })
-
-watch(() => timeDimensionForm.dateRange, (newValue, oldValue) => {
-  const ONE_DAY = 24 * 60 * 60 * 1000
-  const isOverMaxDays = (dayjs(newValue[1]) - dayjs(newValue[0])) / ONE_DAY > props.maxDays
-  if (isOverMaxDays) {
-    timeDimensionForm.dateRange = getDateRangeFromTime()
-    ElNotification.warning(t('TimeRangeDimension.message.isOverMaxDays', { max: props.maxDays }))
-  }
-})
-
-watch(timeRange, (newTypeTimeRange) => {
-  if (newTypeTimeRange === 'custom') {
-    if (timeDimensionForm.granularity === 'hour')
-      timeDimensionForm.granularity = 'day'
-    timeDimensionForm.dateRange = getDateRangeFromTime()
-  }
-  else {
-    if (isTimeRangeToday.value)
-      timeDimensionForm.granularity = 'hour'
-
-    if ((!isTimeRangeToday.value && timeDimensionForm.granularity === 'hour')
-      || (!['custom', 'This month'].includes(timeRange.value) && timeDimensionForm.granularity === 'month')) {
-      timeDimensionForm.granularity = 'day'
-    }
-
-    timeDimensionForm.dateRange = getDateRangeFromTime(newTypeTimeRange)
-  }
-})
-
-const renderTimes = computed(() => {
-  const now = dayjs().tz(TIMEZONE_USER.value)
-  const dayOfWeek = now.day() - 1
-  const firstOfWeek = now.add(-dayOfWeek, 'day')
-
-  switch (timeRange.value) {
-    case 'Today':
-      return `${t('TimeRangeDimension.day')} ${now.format('YYYY-MM-DD')}`
-    case 'Yesterday':
-      return `${t('TimeRangeDimension.day')} ${now.add(-1, 'day').format('YYYY-MM-DD')}`
-    case 'This week':
-      return `${t('TimeRangeDimension.from')} ${firstOfWeek.format('YYYY-MM-DD')} ${t('TimeRangeDimension.to')} ${firstOfWeek.add(6, 'day').format('YYYY-MM-DD')}`
-    case 'This month':
-      return `${t('TimeRangeDimension.month')} ${now.format('MM-YYYY')}`
-    case 'This year':
-      return `${t('TimeRangeDimension.year')} ${now.format('YYYY')}`
-    case 'Last 7 days':
-      return `${t('TimeRangeDimension.from')} ${now.add(-7, 'day').format('YYYY-MM-DD')} ${t('TimeRangeDimension.to')} ${now.add(-1, 'day').format('YYYY-MM-DD')}`
-    case 'Last 30 days':
-      return `${t('TimeRangeDimension.from')} ${now.add(-30, 'day').format('YYYY-MM-DD')} ${t('TimeRangeDimension.to')} ${now.add(-1, 'day').format('YYYY-MM-DD')}`
-    case 'Last year':
-      return `${t('TimeRangeDimension.year')} ${now.add(-1, 'year').format('YYYY')}`
-    default:
-      return ''
-  }
-})
-</script>
-
-<template>
-  <el-form :model="timeDimensionForm" label-position="left">
-    <div class="flex flex-wrap gap-x-2">
-      <el-form-item
-        v-if="!hideTimeRange"
-        :label="props.title ?? t('DateTime.timeRange')"
-        :show-message="false"
-        class="mb-0!"
-      >
-        <el-select v-model="timeRange" fit-input-width class="w-150px!">
-          <el-option
-            v-for="item in TimeRangeOptions"
-            :key="item.value"
-            :label="t(`TimeRangeOptions.${item.key}`)"
-            :value="item.value"
-          />
-        </el-select>
-      </el-form-item>
-      <el-form-item v-if="timeRange === 'custom'" :show-message="false" class="mb-0!">
-        <el-date-picker
-          v-model="timeDimensionForm.dateRange"
-          :type="dateType"
-          :clearable="false"
-          :popper-options="{
-            placement: 'bottom-end',
-            modifiers: [
-              { name: 'flip', enabled: false },
-            ],
-          }"
-          :start-placeholder="t('DateTime.startDate')"
-          :end-placeholder="t('DateTime.endDate')"
-          value-format="YYYY-MM-DDTHH:mm:ss"
-        />
-      </el-form-item>
-      <el-form-item v-else class="mb-0!">
-        {{ renderTimes }}
-      </el-form-item>
-    </div>
-  </el-form>
-</template>
-
-<i18n lang="yaml" global>
-en:
-  TimeRangeDimension:
-    day: Day
-    from: From
-    to: To
-    month: Month
-    year: Year
-    message:
-      isOverMaxDays: Time query filter does not exceed {max} days
-  TimeRangeOptions:
-    all_time: All time
-    custom: Custom
-    last_30_days: Last 30 days
-    last_7_days: Last 7 days
-    last_year: Last year
-    this_month: This month
-    this_week: This week
-    this_year: This year
-    today: Today
-    yesterday: Yesterday
-
-vi:
-  TimeRangeDimension:
-    day: Ngày
-    from: Từ
-    to: Đến
-    month: Tháng
-    year: Năm
-    message:
-      isOverMaxDays: Bộ lọc truy vấn thời gian không vượt quá {max} ngày
-  TimeRangeOptions:
-    all_time: Tất cả thời gian
-    custom: Tùy chỉnh
-    last_30_days: 30 ngày trước
-    last_7_days: 7 ngày trước
-    last_year: Năm trước
-    this_month: Tháng này
-    this_week: Tuần này
-    this_year: Năm nay
-    today: Hôm nay
-    yesterday: Hôm qua
-</i18n>
+<script setup lang="ts">
+import type { TimeDimension } from '@cubejs-client/core'
+import { dayjs } from 'element-plus'
+import type { TimeRange } from '@/constants/filterable'
+
+const props = withDefaults(defineProps<{
+  hideTimeUnit?: boolean
+  hideTimeRange?: boolean
+  dateType: 'datetimerange' | 'daterange'
+  title?: string
+  rangeDefault?: string
+  maxDays?: number
+  timeRange: string
+}>(), {
+  hideTimeUnit: false,
+  hideTimeRange: false,
+  dateType: 'datetimerange',
+  rangeDefault: 'Today',
+  maxDays: 90,
+})
+const emit = defineEmits<{
+  (e: 'update:time-range', value: string): void
+  (e: 'update:modelValue', value: TimeDimension): void
+}>()
+
+const { modelValue: timeDimensionQuery } = defineModels<{
+  modelValue: TimeDimension
+}>()
+
+const { t } = useI18n()
+
+const timeRange = useVModel(props, 'timeRange', emit, { defaultValue: props.rangeDefault, passive: true })
+const timeDimensionForm = reactive<TimeDimension>({
+  dimension: timeDimensionQuery.value.dimension,
+  granularity: timeDimensionQuery.value.granularity || 'day',
+  dateRange: timeDimensionQuery.value.dateRange,
+})
+
+function getDateRangeFromTime(dateRange: TimeRange) {
+  const now = dayjs().tz(TIMEZONE_USER.value)
+  let query: [string, string]
+
+  switch (dateRange) {
+    case 'Today':
+      query = [
+        now.startOf('day').format('YYYY-MM-DDTHH:mm:ss'),
+        now.endOf('day').format('YYYY-MM-DDTHH:mm:ss'),
+      ]
+      break
+    case 'Yesterday':
+      query = [
+        now.subtract(1, 'day').startOf('day').format('YYYY-MM-DDTHH:mm:ss'),
+        now.subtract(1, 'day').endOf('day').format('YYYY-MM-DDTHH:mm:ss'),
+      ]
+      break
+    case 'This week':
+      query = [
+        now.startOf('week').startOf('day').format('YYYY-MM-DDTHH:mm:ss'),
+        now.endOf('week').endOf('day').format('YYYY-MM-DDTHH:mm:ss'),
+      ]
+      break
+    case 'This month':
+      query = [
+        now.startOf('month').startOf('day').format('YYYY-MM-DDTHH:mm:ss'),
+        now.endOf('month').endOf('day').format('YYYY-MM-DDTHH:mm:ss'),
+      ]
+      break
+    case 'Last 7 days':
+      query = [
+        now.subtract(7, 'day').startOf('day').format('YYYY-MM-DDTHH:mm:ss'),
+        now.subtract(1, 'day').endOf('day').format('YYYY-MM-DDTHH:mm:ss'),
+      ]
+      break
+    case 'last_14_days':
+      query = [
+        now.subtract(14, 'day').startOf('day').format('YYYY-MM-DDTHH:mm:ss'),
+        now.subtract(1, 'day').endOf('day').format('YYYY-MM-DDTHH:mm:ss'),
+      ]
+      break
+    case 'Last 30 days':
+      query = [
+        now.subtract(30, 'day').startOf('day').format('YYYY-MM-DDTHH:mm:ss'),
+        now.subtract(1, 'day').endOf('day').format('YYYY-MM-DDTHH:mm:ss'),
+      ]
+      break
+    default:
+      query = [
+        now.subtract(6, 'day').startOf('day').format('YYYY-MM-DDTHH:mm:ss'),
+        now.endOf('day').format('YYYY-MM-DDTHH:mm:ss'), // Lấy hết ngày hôm nay
+      ]
+      break
+  }
+
+  const timeRangeEpg = ref([0, 23])
+  query[0] = formatTime(`${query[0].split('T')[0]} ${timeRangeEpg.value[0]}:00:00`)
+  query[1] = formatTime(`${query[1].split('T')[0]} ${timeRangeEpg.value[1]}:59:59`)
+
+  return query
+}
+
+const isTimeRangeToday = computed(() => {
+  return ['Today', 'Yesterday'].includes(timeRange.value)
+})
+
+// granularity
+const TimeUnitOpts = computed(() => {
+  return TimeUnitOptions.map((time) => {
+    if (isTimeRangeToday.value && time.value === 'hour')
+      return { ...time, disabled: false }
+
+    if (['custom', 'This month'].includes(timeRange.value) && time.value === 'month')
+      return { ...time, disabled: false }
+
+    return time
+  })
+})
+
+watch(timeDimensionForm, (newValue) => {
+  if (props.hideTimeUnit)
+    newValue.granularity = undefined
+
+  timeDimensionQuery.value = newValue
+  emit('update:modelValue', timeDimensionQuery.value)
+}, { deep: true })
+
+watch(() => timeDimensionForm.dateRange, (newValue, oldValue) => {
+  const ONE_DAY = 24 * 60 * 60 * 1000
+  const isOverMaxDays = (dayjs(newValue[1]) - dayjs(newValue[0])) / ONE_DAY > props.maxDays
+  if (isOverMaxDays) {
+    timeDimensionForm.dateRange = getDateRangeFromTime()
+    ElNotification.warning(t('TimeRangeDimension.message.isOverMaxDays', { max: props.maxDays }))
+  }
+})
+
+watch(timeRange, (newTypeTimeRange) => {
+  if (newTypeTimeRange === 'custom') {
+    if (timeDimensionForm.granularity === 'hour')
+      timeDimensionForm.granularity = 'day'
+    timeDimensionForm.dateRange = getDateRangeFromTime()
+  }
+  else {
+    if (isTimeRangeToday.value)
+      timeDimensionForm.granularity = 'hour'
+
+    if ((!isTimeRangeToday.value && timeDimensionForm.granularity === 'hour')
+      || (!['custom', 'This month'].includes(timeRange.value) && timeDimensionForm.granularity === 'month')) {
+      timeDimensionForm.granularity = 'day'
+    }
+
+    timeDimensionForm.dateRange = getDateRangeFromTime(newTypeTimeRange)
+  }
+})
+
+const renderTimes = computed(() => {
+  const now = dayjs().tz(TIMEZONE_USER.value)
+  const dayOfWeek = now.day() - 1
+  const firstOfWeek = now.add(-dayOfWeek, 'day')
+
+  switch (timeRange.value) {
+    case 'Today':
+      return `${t('TimeRangeDimension.day')} ${now.format('YYYY-MM-DD')}`
+    case 'Yesterday':
+      return `${t('TimeRangeDimension.day')} ${now.add(-1, 'day').format('YYYY-MM-DD')}`
+    case 'This week':
+      return `${t('TimeRangeDimension.from')} ${firstOfWeek.format('YYYY-MM-DD')} ${t('TimeRangeDimension.to')} ${firstOfWeek.add(6, 'day').format('YYYY-MM-DD')}`
+    case 'This month':
+      return `${t('TimeRangeDimension.month')} ${now.format('MM-YYYY')}`
+    case 'This year':
+      return `${t('TimeRangeDimension.year')} ${now.format('YYYY')}`
+    case 'Last 7 days':
+      return `${t('TimeRangeDimension.from')} ${now.add(-7, 'day').format('YYYY-MM-DD')} ${t('TimeRangeDimension.to')} ${now.add(-1, 'day').format('YYYY-MM-DD')}`
+    case 'Last 30 days':
+      return `${t('TimeRangeDimension.from')} ${now.add(-30, 'day').format('YYYY-MM-DD')} ${t('TimeRangeDimension.to')} ${now.add(-1, 'day').format('YYYY-MM-DD')}`
+    case 'Last year':
+      return `${t('TimeRangeDimension.year')} ${now.add(-1, 'year').format('YYYY')}`
+    default:
+      return ''
+  }
+})
+</script>
+
+<template>
+  <el-form :model="timeDimensionForm" label-position="left">
+    <div class="flex flex-wrap gap-x-2">
+      <el-form-item
+        v-if="!hideTimeRange"
+        :label="props.title ?? t('DateTime.timeRange')"
+        :show-message="false"
+        class="mb-0!"
+      >
+        <el-select v-model="timeRange" fit-input-width class="w-150px!">
+          <el-option
+            v-for="item in TimeRangeOptions"
+            :key="item.value"
+            :label="t(`TimeRangeOptions.${item.key}`)"
+            :value="item.value"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item v-if="timeRange === 'custom'" :show-message="false" class="mb-0!">
+        <el-date-picker
+          v-model="timeDimensionForm.dateRange"
+          :type="dateType"
+          :clearable="false"
+          :popper-options="{
+            placement: 'bottom-end',
+            modifiers: [
+              { name: 'flip', enabled: false },
+            ],
+          }"
+          :start-placeholder="t('DateTime.startDate')"
+          :end-placeholder="t('DateTime.endDate')"
+          value-format="YYYY-MM-DDTHH:mm:ss"
+        />
+      </el-form-item>
+      <el-form-item v-else class="mb-0!">
+        {{ renderTimes }}
+      </el-form-item>
+    </div>
+  </el-form>
+</template>
+
+<i18n lang="yaml" global>
+en:
+  TimeRangeDimension:
+    day: Day
+    from: From
+    to: To
+    month: Month
+    year: Year
+    message:
+      isOverMaxDays: Time query filter does not exceed {max} days
+  TimeRangeOptions:
+    all_time: All time
+    custom: Custom
+    last_30_days: Last 30 days
+    last_7_days: Last 7 days
+    last_year: Last year
+    this_month: This month
+    this_week: This week
+    this_year: This year
+    today: Today
+    yesterday: Yesterday
+
+vi:
+  TimeRangeDimension:
+    day: Ngày
+    from: Từ
+    to: Đến
+    month: Tháng
+    year: Năm
+    message:
+      isOverMaxDays: Bộ lọc truy vấn thời gian không vượt quá {max} ngày
+  TimeRangeOptions:
+    all_time: Tất cả thời gian
+    custom: Tùy chỉnh
+    last_30_days: 30 ngày trước
+    last_7_days: 7 ngày trước
+    last_year: Năm trước
+    this_month: Tháng này
+    this_week: Tuần này
+    this_year: Năm nay
+    today: Hôm nay
+    yesterday: Hôm qua
+</i18n>