feat(global): timezone format

src/components/global-setting/index.vue

@@ -29,12 +29,26 @@ a-drawer.settings-drawer(
       a-input(v-model="settingsForm.username")
     a-form-item(:label="$t('settings.password')")
       a-input-password(v-model="settingsForm.password" autocomplete="off")
+    a-form-item(:label="$t('settings.timezone')")
+      a-select(v-model="settingsForm.userTimezone")
+        //- a-option(
+        //-   v-for="item of timezones"
+        //-   :key="item"
+        //-   :value="item"
+        //-   :label="item"
+        //- )
 </template>
 
 <script lang="ts" setup name="GlobalSetting">
   import { useI18n } from 'vue-i18n'
   import { useAppStore, useDataBaseStore } from '@/store'
   import axios from 'axios'
+  import dayjs from 'dayjs'
+  import utc from 'dayjs/plugin/utc'
+  import timezone from 'dayjs/plugin/timezone'
+
+  dayjs.extend(utc)
+  dayjs.extend(timezone)
 
   const MARGIN_BOTTOM = `${44 * 2 + 1}px`
   const emit = defineEmits(['cancel'])
@@ -45,15 +59,19 @@ a-drawer.settings-drawer(
   const { getScriptsTable, checkTables } = useDataBaseStore()
 
   const { role } = storeToRefs(useUserStore())
-  const { codeType, globalSettings, host, database, username, password, databaseList } = storeToRefs(useAppStore())
+  const { codeType, globalSettings, host, database, username, password, databaseList, userTimezone } = storeToRefs(
+    useAppStore()
+  )
 
   const settingsForm = ref({
     username: username.value,
     password: password.value,
     host: host.value,
     databaseList,
     database: database.value,
+    userTimezone: dayjs.tz.guess(), // America/Chicago
   })
+  console.log('settingsForm', dayjs.tz.guess())
 
   const cancel = async () => {
     updateSettings({ globalSettings: false })
@@ -82,14 +100,20 @@ a-drawer.settings-drawer(
   }
 
   watch(globalSettings, () => {
+    dayjs.tz.setDefault('America/Chicago')
+    console.log(dayjs.tz(dayjs()).utcOffset() / 60)
+    // dayjs.tz.setDefault('Asia/Shanghai')
+    // console.log(dayjs.tz(dayjs()).utcOffset() / 60)
     if (globalSettings.value) {
       settingsForm.value = {
         username: username.value,
         password: password.value,
         host: host.value,
         databaseList: databaseList.value,
         database: database.value,
+        userTimezone: userTimezone.value || dayjs.tz.name,
       }
+      console.log('settingsForm', settingsForm.value)
     }
   })
 
@@ -114,7 +138,7 @@ a-drawer.settings-drawer(
 <style lang="less">
   .settings-drawer {
     .arco-drawer {
-      height: 335px;
+      height: min-content;
       margin-left: 24px;
       border-radius: 4px;
       box-shadow: 0 4px 10px 0 var(--border-color);
@@ -126,7 +150,7 @@ a-drawer.settings-drawer(
       }
 
       .arco-drawer-body {
-        padding: 16px 10px 0 10px;
+        padding: 16px 10px;
       }
     }
   }

src/components/global-setting/local/en-US.ts

@@ -6,4 +6,5 @@ export default {
   'settings.database': 'Database',
   'settings.save': 'Save',
   'settings.host': 'Host',
+  'settings.timezone': 'Timezone',
 }

src/components/global-setting/local/zh-CN.ts

@@ -5,4 +5,5 @@ export default {
   'settings.password': '密码',
   'settings.database': '数据库',
   'settings.save': '保存',
+  'settings.timezone': '时区',
 }

src/config/settings.json

@@ -23,5 +23,6 @@
   "guideModalVisible": false,
   "lifetime": "long",
   "menuSelectedKey": "query",
-  "queryModalVisible": false
+  "queryModalVisible": false,
+  "userTimezone": ""
 }

src/store/modules/app/types.ts

@@ -26,4 +26,5 @@ export interface AppState {
   lifetime: string
   [key: string]: unknown
   queryModalVisible: boolean
+  userTimezone: string
 }

src/utils/index.ts

@@ -42,24 +42,58 @@ export const regexUrl = new RegExp(
   'i'
 )
 
-export const dateFormatter = (dataType: string, value: number | null) => {
+export const dateToMs = (dataType: string, value: number | null) => {
   switch (dataType) {
     case 'Date':
-      return value && dayjs(0).add(value, 'day').format('YYYY-MM-DD HH:mm:ss')
+      return value && dayjs(0).add(value, 'day').valueOf()
     case 'DateTime':
     case 'TimestampSecond':
-      return value && dayjs.unix(value).format('YYYY-MM-DD HH:mm:ss')
+      return value && dayjs.unix(value).valueOf()
     case 'TimestampMillisecond':
-      return value && dayjs(value).format('YYYY-MM-DD HH:mm:ss')
+      return value
     case 'TimestampMicrosecond':
-      return value && dayjs(value / 1000).format('YYYY-MM-DD HH:mm:ss')
+      return value && value / 1000
     case 'TimestampNanosecond':
-      return value && dayjs(value / 1000000).format('YYYY-MM-DD HH:mm:ss')
+      return value && value / 1000000
     default:
       return null
   }
 }
 
+export const dateData = (dataType: string, value: number | null) => {
+  if (value === null) {
+    return null
+  }
+  return dayjs(dateToMs(dataType, value))
+  // console.log('dataType', dataType, value)
+  // switch (dataType) {
+  //   case 'Date':
+  //     return value && dayjs(0).add(value, 'day')
+  //   case 'DateTime':
+  //   case 'TimestampSecond':
+  //     return value && dayjs.unix(value).tz()
+  //   case 'TimestampMillisecond':
+  //     return value && dayjs(value).tz()
+  //   case 'TimestampMicrosecond':
+  //     return value && dayjs(value / 1000).tz()
+  //   case 'TimestampNanosecond':
+  //     return value && dayjs(value / 1000000).tz()
+  //   default:
+  //     return null
+  // }
+}
+
+export const dateFormatter = (dataType: string, value: number | null, format?: string) => {
+  const date = dateData(dataType, value)
+  if (!format) {
+    format = 'YYYY-MM-DD HH:mm:ss'
+  }
+  if (date) {
+    return date.format(format)
+  }
+  return null
+}
+
 export const sqlFormatter = (code: string) => {
   try {
     const sql = sqlFormat(code, { language: 'postgresql', keywordCase: 'upper' })

src/views/dashboard/modules/data-view/components/data-chart.vue

@@ -58,7 +58,7 @@ a-card(v-if="hasChart" :bordered="false")
   import type { PropType } from 'vue'
   import type { datasetType, ResultType, ChartFormType, SeriesType } from '@/store/modules/code-run/types'
   import useDataChart from '@/hooks/data-chart'
-  import { dateFormatter, groupByToMap } from '@/utils'
+  import { dateData, dateFormatter, dateToMs, groupByToMap } from '@/utils'
   import { chartTypeOptions, updateOptions } from '../../../config'
 
   const props = defineProps({
@@ -139,6 +139,7 @@ a-card(v-if="hasChart" :bordered="false")
         dimensions: props.data.dimensionsAndXName.dimensions,
         source: props.data.records.rows,
       })
+
       dataset.push({
         transform: {
           type: 'sort',
@@ -187,6 +188,7 @@ a-card(v-if="hasChart" :bordered="false")
 
   const makeOptions = () => {
     const { series, legendNames, dataset } = getChartConfig(chartForm.selectedYTypes)
+    console.log(props.data.records.rows)
     const xAxis: any = {
       axisLine: {
         lineStyle: {
@@ -198,23 +200,20 @@ a-card(v-if="hasChart" :bordered="false")
 
     const dataType = chartForm.xAxisType.data_type
 
-    if (dataType !== 'TimestampMillisecond') {
-      xAxis.axisLabel.formatter = (value: number) => {
-        return dateFormatter(dataType, value)
-      }
-      xAxis.axisPointer = {
-        label: {
-          formatter: (params: any) => {
-            const { value } = params
-            return dateFormatter(dataType, value)
-          },
+    xAxis.axisLabel.formatter = (value: number) => {
+      console.log(dateToMs(dataType, value))
+      return dateFormatter(dataType, value)
+    }
+    xAxis.axisPointer = {
+      label: {
+        formatter: (params: any) => {
+          const { value } = params
+          return dateFormatter(dataType, value)
         },
-      }
-      xAxis.min = (value: any) => {
-        return value.min
-      }
-    } else {
-      xAxis.type = 'time'
+      },
+    }
+    xAxis.min = (value: any) => {
+      return value.min
     }
 
     const legendIconHeight = 14