[Core] Fixed code

core/datacap-ui/package.json

@@ -43,6 +43,7 @@
   "devDependencies": {
     "@types/lodash": "^4.17.0",
     "@types/node": "^20.11.26",
+    "@types/uuid": "^9.0.8",
     "@vitejs/plugin-vue": "^5.0.4",
     "autoprefixer": "^10.4.18",
     "postcss": "^8.4.35",

core/datacap-ui/src/utils/common.ts

@@ -1,8 +1,14 @@
-const token = 'DataCapAuthToken';
-const menu = 'DataCapAvailableMenus';
-const userEditorConfigure = 'DataCapUserEditorConfigure';
-const getCurrentUserId = () => {
-    return JSON.parse(localStorage.getItem(token) || '{}').id;
+const token = 'DataCapAuthToken'
+const menu = 'DataCapAvailableMenus'
+const userEditorConfigure = 'DataCapUserEditorConfigure'
+
+/**
+ * Retrieves the current user's ID from local storage.
+ *
+ * @return {number} The current user's ID.
+ */
+const getCurrentUserId = (): number => {
+    return JSON.parse(localStorage.getItem(token) || '{}').id
 }
 
 export default {

core/datacap-ui/src/utils/object.ts

@@ -21,4 +21,14 @@ export class ObjectUtils
     {
         return !this.isEmpty(obj)
     }
+
+    /**
+     * Returns the current timestamp as a number.
+     *
+     * @return {number} The current timestamp.
+     */
+    static getTimestamp(): number
+    {
+        return Date.parse(new Date().toString())
+    }
 }

core/datacap-ui/src/views/components/echarts/DataUtils.ts

@@ -5,7 +5,7 @@
  * @param {any[]} columns - The array of objects to extract values from.
  * @return {any[]} An array containing unique values extracted from the specified key in each object.
  */
-export function getValueByKey(key: string, columns: []): any[]
+export function getValueByKey(key: string, columns: never[]): any[]
 {
     const container: any[] = []
     columns.forEach(column => {

core/datacap-ui/src/views/components/echarts/EchartsEditor.vue

@@ -19,10 +19,7 @@
       <Layout v-if="configure">
         <Layout>
           <Content>
-            <EchartsPreview :key="referKey"
-                            :height="'500px'"
-                            :configure="chartOptions">
-            </EchartsPreview>
+            <EchartsPreview :key="referKey" :height="'500px'" :configure="chartOptions"/>
           </Content>
           <Sider style="background-color: #FFFFFF;"
                  hide-trigger>
@@ -50,48 +47,52 @@
                 <Collapse v-if="chartType"
                           v-model="collapseValue"
                           accordion>
-                  <Panel name="xAxis">
-                    {{ $t('common.xAxis') }}
-                    <template #content>
-                      <FormItem :label="$t('common.column')">
-                        <Select v-model="defaultConfigure.xAxis" @on-change="handlerChangeValue('xAxis')">
-                          <Option v-for="value of configure.headers" :value="value" v-bind:key="value">{{ value }}</Option>
-                        </Select>
-                      </FormItem>
-                      <FormItem :label="$t('common.type')">
-                        <RadioGroup v-model="chartOptions.xAxis.type" type="button" size="small" @on-change="handlerChangeValue">
-                          <Radio label="value">{{ $t('common.column') }}</Radio>
-                          <Radio label="category">{{ $t('common.tag') }}</Radio>
-                        </RadioGroup>
-                      </FormItem>
-                    </template>
-                  </Panel>
-                  <Panel v-if="chartOptions.xAxis && !chartOptions.yAxis.disabled" disabled name="yAxis">
-                    {{ $t('common.yAxis') }}
-                    <template #content>
-                      <FormItem label="Value">
-                        <Select v-model="defaultConfigure.yAxis">
-                          <Option v-for="value of configure.headers" :value="value" v-bind:key="value">{{ value }}</Option>
-                        </Select>
-                      </FormItem>
-                      <FormItem label="Type">
-                        <RadioGroup v-model="chartOptions.yAxis.type" @on-change="handlerChangeValue">
-                          <Radio label="value"></Radio>
-                          <Radio label="category"></Radio>
-                        </RadioGroup>
-                      </FormItem>
-                    </template>
-                  </Panel>
-                  <Panel v-if="chartOptions.xAxis" name="Series">
-                    {{ $t('common.data') }}
-                    <template #content>
-                      <FormItem :label="$t('common.column')">
-                        <Select v-model="defaultConfigure.series" @on-change="handlerChangeValue('Series')">
-                          <Option v-for="value of configure.headers" :value="value" v-bind:key="value">{{ value }}</Option>
-                        </Select>
-                      </FormItem>
-                    </template>
-                  </Panel>
+                  <div v-if="chartOptions">
+                    <Panel name="xAxis">
+                      {{ $t('common.xAxis') }}
+                      <template #content>
+                        <FormItem :label="$t('common.column')">
+                          <Select v-model="defaultConfigure.xAxis" @on-change="handlerChangeValue('xAxis')">
+                            <Option v-for="value of configure.headers" :value="value" v-bind:key="value">{{ value }}</Option>
+                          </Select>
+                        </FormItem>
+                        <FormItem v-if="chartOptions.xAxis" :label="$t('common.type')">
+                          <RadioGroup v-model="chartOptions.xAxis.type" type="button" size="small" @on-change="handlerChangeValue">
+                            <Radio label="value">{{ $t('common.column') }}</Radio>
+                            <Radio label="category">{{ $t('common.tag') }}</Radio>
+                          </RadioGroup>
+                        </FormItem>
+                      </template>
+                    </Panel>
+                    <Panel v-if="chartOptions.xAxis && chartOptions.yAxis && !chartOptions.yAxis.disabled" disabled name="yAxis">
+                      {{ $t('common.yAxis') }}
+                      <template #content>
+                        <FormItem label="Value">
+                          <Select v-model="defaultConfigure.yAxis">
+                            <Option v-for="value of configure.headers" :value="value" v-bind:key="value">{{ value }}</Option>
+                          </Select>
+                        </FormItem>
+                        <FormItem label="Type">
+                          <RadioGroup v-model="chartOptions.yAxis.type" @on-change="handlerChangeValue">
+                            <Radio label="value"></Radio>
+                            <Radio label="category"></Radio>
+                          </RadioGroup>
+                        </FormItem>
+                      </template>
+                    </Panel>
+                  </div>
+                  <div v-if="chartOptions">
+                    <Panel v-if="chartOptions.xAxis" name="Series">
+                      {{ $t('common.data') }}
+                      <template #content>
+                        <FormItem :label="$t('common.column')">
+                          <Select v-model="defaultConfigure.series" @on-change="handlerChangeValue('Series')">
+                            <Option v-for="value of configure.headers" :value="value" v-bind:key="value">{{ value }}</Option>
+                          </Select>
+                        </FormItem>
+                      </template>
+                    </Panel>
+                  </div>
                 </Collapse>
               </Card>
             </Form>
@@ -116,28 +117,28 @@
   </div>
 </template>
 <script lang="ts">
-import {defineComponent} from 'vue';
-import {ChartConfigure} from "@/components/editor/echarts/configure/ChartConfigure";
-import {getValueByKey} from "./DataUtils";
-import {getTimestamp} from "@/common/DateCommon";
-import {SeriesConfigure} from "@/components/editor/echarts/configure/SeriesConfigure";
-import {isEmpty} from "lodash";
-import {EchartsConfigure} from "@/components/editor/echarts/EchartsConfigure";
-import EchartsPreview from "@/components/editor/echarts/EchartsPreview.vue";
-import {AxisConfigure} from "@/components/editor/echarts/configure/AxisConfigure";
-import {FontAwesomeIcon} from "@fortawesome/vue-fontawesome";
-import ReportService from "@/services/admin/ReportService";
+import { defineComponent } from 'vue';
+import { ChartConfigure } from '@/views/components/echarts/configure/ChartConfigure'
+import { getValueByKey } from './DataUtils'
+import { SeriesConfigure } from '@/views/components/echarts/configure/SeriesConfigure'
+import { isEmpty } from 'lodash'
+import { EchartsConfigure } from '@/views/components/echarts/EchartsConfigure'
+import EchartsPreview from '@/views/components/echarts/EchartsPreview.vue'
+import { AxisConfigure } from '@/views/components/echarts/configure/AxisConfigure'
+import ReportService from '@/services/report'
+import { ObjectUtils } from '@/utils/object'
+import { ToastUtils } from '@/utils/toast'
 
 export default defineComponent({
   name: 'EchartsEditor',
-  components: {FontAwesomeIcon, EchartsPreview},
+  components: {EchartsPreview},
   props: {
     isVisible: {
       type: Boolean,
       default: () => false
     },
     configure: {
-      type: EchartsConfigure,
+      type: Object as () => EchartsConfigure,
       default: () => null
     },
     sourceId: {
@@ -157,48 +158,62 @@ export default defineComponent({
         yAxis: '',
         series: ''
       },
-      chartOptions: null as ChartConfigure,
+      chartOptions: null as ChartConfigure | null,
       chartType: null,
-      formState: {name: null, realtime: null, type: 'QUERY', configure: null, source: {id: null}, query: null},
+      formState: {
+        name: null as string | null,
+        realtime: null,
+        type: 'QUERY',
+        configure: null as string | null,
+        source: {id: null as number | null},
+        query: null as string | null
+      },
       loading: false
     }
   },
   created()
   {
-    this.handlerInitialize();
+    this.handlerInitialize()
   },
   methods: {
     handlerInitialize()
     {
-      this.chartOptions = new ChartConfigure();
+      this.chartOptions = new ChartConfigure()
     },
     handlerChangeValue(type: string)
     {
-      this.referKey = getTimestamp();
+      this.referKey = ObjectUtils.getTimestamp()
 
       switch (type) {
         case 'xAxis':
-          this.chartOptions.xAxis = new AxisConfigure();
-          this.chartOptions.xAxis.data = getValueByKey(this.defaultConfigure.xAxis, this.configure.columns);
-          this.chartOptions.xAxis.meta.column = this.defaultConfigure.xAxis;
-          this.chartOptions.yAxis = new AxisConfigure();
-          this.chartOptions.yAxis.type = 'value';
-          this.chartOptions.yAxis.data = getValueByKey(this.defaultConfigure.yAxis, this.configure.columns);
-          this.chartOptions.yAxis.disabled = true;
-          this.chartOptions.yAxis.meta.column = this.defaultConfigure.yAxis;
-          break;
+          if (this.chartOptions && this.configure) {
+            this.chartOptions.xAxis = new AxisConfigure()
+            this.chartOptions.xAxis.data = getValueByKey(this.defaultConfigure.xAxis, this.configure.columns as never[]) as never[]
+            this.chartOptions.xAxis.meta.column = this.defaultConfigure.xAxis
+            this.chartOptions.yAxis = new AxisConfigure()
+            this.chartOptions.yAxis.type = 'value'
+            this.chartOptions.yAxis.data = getValueByKey(this.defaultConfigure.yAxis, this.configure.columns as never[]) as never[]
+            this.chartOptions.yAxis.disabled = true
+            this.chartOptions.yAxis.meta.column = this.defaultConfigure.yAxis
+          }
+          break
         case 'Series': {
-          const series: SeriesConfigure = new SeriesConfigure();
-          series.data = getValueByKey(this.defaultConfigure.series, this.configure.columns);
-          series.type = this.chartType;
-          series.meta.column = this.defaultConfigure.series;
-          this.chartOptions.series = [];
-          this.chartOptions.series.push(series);
+          if (this.chartOptions && this.configure) {
+            const series: SeriesConfigure = new SeriesConfigure()
+            series.data = getValueByKey(this.defaultConfigure.series, this.configure.columns as never[])
+            series.type = this.chartType as any
+            series.meta.column = this.defaultConfigure.series
+            this.chartOptions.series = []
+            this.chartOptions.series.push(series)
+          }
           break;
         }
         case 'Type': {
-          if (this.chartOptions.series) {
-            this.chartOptions.series[0].type = this.chartType;
+          if (this.chartOptions) {
+            const array = this.chartOptions.series as never[]
+            if (array.length > 0) {
+              (array as any[])[0].type = this.chartType
+            }
           }
         }
       }
@@ -206,27 +221,31 @@ export default defineComponent({
     },
     handlerSetDefaultValue()
     {
-      if (isEmpty(this.defaultConfigure.xAxis)) {
-        this.chartOptions.xAxis.data = null;
-      }
-      if (isEmpty(this.defaultConfigure.yAxis)) {
-        this.chartOptions.yAxis.data = null;
+      if (this.chartOptions) {
+        if (isEmpty(this.defaultConfigure.xAxis)) {
+          this.chartOptions.xAxis = new AxisConfigure()
+        }
+        if (isEmpty(this.defaultConfigure.yAxis)) {
+          this.chartOptions.yAxis = new AxisConfigure()
+        }
       }
     },
     handlerPublish()
     {
-      this.loading = true;
-      this.formState.configure = JSON.stringify(this.chartOptions);
-      this.formState.source.id = this.sourceId;
-      this.formState.query = this.query;
-      ReportService.saveOrUpdate(this.formState)
-        .then(response => {
-          if (response.status) {
-            this.$Message.success(this.$t('report.publishSuccess').replace('REPLACE_NAME', this.formState.name));
-            this.visible = false;
-          }
-        })
-        .finally(() => this.loading = false);
+      if (this.formState) {
+        this.loading = true
+        this.formState.configure = JSON.stringify(this.chartOptions)
+        this.formState.source.id = this.sourceId as number
+        this.formState.query = this.query as string
+        ReportService.saveOrUpdate(this.formState)
+            .then(response => {
+              if (response.status) {
+                ToastUtils.success(this.$t('report.publishSuccess').replace('REPLACE_NAME', this.formState.name as string))
+                this.visible = false
+              }
+            })
+            .finally(() => this.loading = false)
+      }
     }
   },
   computed: {
@@ -243,8 +262,3 @@ export default defineComponent({
   }
 });
 </script>
-<style scoped>
-.ivu-drawer-body {
-  padding: 0px;
-}
-</style>

core/datacap-ui/src/views/components/echarts/EchartsPreview.vue

@@ -1,7 +1,7 @@
 <template>
   <div>
     <CircularLoading v-if="loading" :show="loading"/>
-    <div :style="{width: width, height: height, padding: '0'}" :id="key"/>
+    <div v-else :style="{width: width, height: height, padding: '0'}" :id="key"/>
   </div>
 </template>
 <script lang="ts">
@@ -29,7 +29,7 @@ export default defineComponent({
       default: () => '300px'
     },
     configure: {
-      type: Object as () => ChartConfigure
+      type: Object as () => ChartConfigure | null
     },
     id: {
       type: Number
@@ -47,7 +47,7 @@ export default defineComponent({
   {
     return {
       loading: false,
-      key: null as string | null
+      key: ''
     }
   },
   methods: {
@@ -79,7 +79,7 @@ export default defineComponent({
                               configure.yAxis.data = getValueByKey(configure.yAxis.meta.column, response.data.columns)
                               configure.series.forEach((item: SeriesConfigure) => {
                                 const series: SeriesConfigure = item as SeriesConfigure
-                                series.data = getValueByKey(series.meta.column, response.data.columns)
+                                series.data = getValueByKey(series.meta.column as string, response.data.columns)
                               })
                               echartsChart.setOption(configure)
                             })
@@ -87,13 +87,13 @@ export default defineComponent({
                       }
                     }
                     else {
-                      echartsChart.setOption(this.configure)
+                      echartsChart.setOption(this.configure as any)
                     }
                   })
                   .finally(() => this.loading = false)
             }
             else {
-              echartsChart.setOption(this.configure)
+              echartsChart.setOption(this.configure as any)
             }
           }
         }

core/datacap-ui/src/views/components/echarts/configure/AxisConfigure.ts

@@ -1,7 +1,9 @@
 export class AxisConfigure
 {
     type = 'category'
-    data: any[] = []
+    data: never[] = []
     disabled = false
-    meta = {column: null}
+    meta = {
+        column: null as string | null
+    }
 }

core/datacap-ui/src/views/components/echarts/configure/SeriesConfigure.ts

@@ -6,6 +6,6 @@ export class SeriesConfigure
     type: EchartsType = EchartsType.LINE
     smooth = true
     meta = {
-        column: ''
+        column: null as string | null
     }
 }

core/datacap-ui/src/views/components/sql/SqlInfo.vue

@@ -14,7 +14,7 @@
 </template>
 
 <script lang="ts">
-import { defineComponent } from 'vue'
+import { defineComponent, PropType } from 'vue'
 import {
   AlertDialog,
   AlertDialogAction,
@@ -45,14 +45,13 @@ export default defineComponent({
       default: () => false
     },
     content: {
-      type: String,
-      default: () => ''
+      type: String as PropType<string | null>
     }
   },
   data()
   {
     return {
-      localContent: this.content,
+      localContent: this.content as string,
       configure: null as UserEditor | null,
       editorOptions: {readOnly: true}
     }

core/datacap-ui/src/views/components/visual/Configuration.ts

@@ -3,8 +3,8 @@ import { Type } from '@/views/components/visual/Type'
 export class Configuration
 {
     title?: null
-    headers: [] = []
-    columns: [] = []
+    headers: never[] = []
+    columns: never[] = []
     type: Type = Type.TABLE
     message?: null
     chartConfigure?: IChart

core/datacap-ui/src/views/components/visual/Utils.ts

@@ -1,13 +1,19 @@
-const createdTableHeader = (data: []) => {
-  return data.map(item => {
-    return {
-      "field": item,
-      "title": item,
-      "width": 'auto'
-    }
-  })
+/**
+ * Generates a table header based on the given data array.
+ *
+ * @param {never[]} data - the input data array
+ * @return {object[]} an array of objects representing the table header
+ */
+const createdTableHeader = (data: never[]): object[] => {
+    return data.map(item => {
+        return {
+            'field': item,
+            'title': item,
+            'width': 'auto'
+        }
+    })
 }
 
 export {
-  createdTableHeader
+    createdTableHeader
 }

core/datacap-ui/src/views/components/visual/VisualEditor.vue

@@ -11,34 +11,13 @@
       </AlertDescription>
     </Alert>
     <div v-else>
-      <VisualTable v-if="configuration?.type === Type.TABLE"
-                   :configuration="configuration"
-                   @commitOptions="handlerCommit">
-      </VisualTable>
-      <VisualLine v-else-if="configuration?.type === Type.LINE"
-                  :configuration="configuration"
-                  @commitOptions="handlerCommit">
-      </VisualLine>
-      <VisualBar v-else-if="configuration?.type === Type.BAR"
-                 :configuration="configuration"
-                 @commitOptions="handlerCommit">
-      </VisualBar>
-      <VisualArea v-else-if="configuration?.type === Type.AREA"
-                  :configuration="configuration"
-                  @commitOptions="handlerCommit">
-      </VisualArea>
-      <VisualPie v-else-if="configuration?.type === Type.PIE"
-                 :configuration="configuration"
-                 @commitOptions="handlerCommit">
-      </VisualPie>
-      <VisualHistogram v-else-if="configuration?.type === Type.HISTOGRAM"
-                       :configuration="configuration"
-                       @commitOptions="handlerCommit">
-      </VisualHistogram>
-      <VisualWordCloud v-else-if="configuration?.type === Type.WORDCLOUD"
-                       :configuration="configuration"
-                       @commitOptions="handlerCommit">
-      </VisualWordCloud>
+      <VisualTable v-if="configuration?.type === Type.TABLE" :configuration="configuration" @commitOptions="handlerCommit"/>
+      <VisualLine v-else-if="configuration?.type === Type.LINE" :configuration="configuration" @commitOptions="handlerCommit"/>
+      <VisualBar v-else-if="configuration?.type === Type.BAR" :configuration="configuration" @commitOptions="handlerCommit"/>
+      <VisualArea v-else-if="configuration?.type === Type.AREA" :configuration="configuration" @commitOptions="handlerCommit"/>
+      <VisualPie v-else-if="configuration?.type === Type.PIE" :configuration="configuration" @commitOptions="handlerCommit"/>
+      <VisualHistogram v-else-if="configuration?.type === Type.HISTOGRAM" :configuration="configuration" @commitOptions="handlerCommit"/>
+      <VisualWordCloud v-else-if="configuration?.type === Type.WORDCLOUD" :configuration="configuration" @commitOptions="handlerCommit"/>
     </div>
   </div>
 </template>
@@ -52,7 +31,7 @@ import { Configuration } from './Configuration'
 import VisualBar from '@/views/components/visual/components/VisualBar.vue'
 import VisualLine from '@/views/components/visual/components/VisualLine.vue'
 import VisualTable from '@/views/components/visual/components/VisualTable.vue'
-import { defineComponent } from 'vue'
+import { defineComponent, PropType } from 'vue'
 import { Alert, AlertDescription } from '@/components/ui/alert'
 
 export default defineComponent({
@@ -69,7 +48,7 @@ export default defineComponent({
   },
   props: {
     configuration: {
-      type: Object as () => Configuration
+      type: Object as PropType<Configuration | null>
     }
   },
   methods: {

core/datacap-ui/src/views/components/visual/components/VisualTable.vue

@@ -44,7 +44,7 @@ export default defineComponent({
             },
             autoFillWidth: true
           }
-          const tableInstance = new VTable.ListTable(this.$refs.content as HTMLElement, options)
+          const tableInstance = new VTable.ListTable(this.$refs.content as HTMLElement, options as any)
           // Add cell tooltip
           tableInstance.on('mouseenter_cell', (args) => {
             const {col, row} = args

core/datacap-ui/src/views/pages/admin/dashboard/DashboardInfo.vue

@@ -16,6 +16,14 @@ import { useRouter } from 'vue-router'
 import { DashboardModel } from '@/model/dashboard'
 import DashboardEditor from '@/views/pages/admin/dashboard/components/DashboardEditor.vue'
 
+interface Node {
+  id: number
+  type: string
+  label: string
+  position: { x: number, y: number }
+  data: any
+}
+
 export default defineComponent({
   name: 'DashboardInfo',
   components: {DashboardEditor, CircularLoading},
@@ -25,7 +33,7 @@ export default defineComponent({
       loading: false,
       saving: false,
       configure: null as DashboardModel | null,
-      nodes: [],
+      nodes: [] as Node[],
       sourceConfigure: null as DashboardModel | null
     }
   },

core/datacap-ui/src/views/pages/admin/dashboard/components/DashboardChart.vue

@@ -13,6 +13,7 @@
     </Card>
   </div>
 </template>
+
 <script lang="ts">
 import '../style.css'
 import { defineComponent } from 'vue'
@@ -22,6 +23,12 @@ import { FilterModel } from '@/model/filter'
 import EchartsPreview from '@/views/components/echarts/EchartsPreview.vue'
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
 
+interface Node {
+  id: number
+  name: string
+  configure: string
+}
+
 export default defineComponent({
   name: 'DashboardChart',
   components: {
@@ -31,7 +38,7 @@ export default defineComponent({
   },
   setup()
   {
-    const onDragStart = (event: { dataTransfer: { setData: (arg0: string, arg1: any) => void; effectAllowed: string; }; }, node: any) => {
+    const onDragStart = (event: any, node: any) => {
       if (event.dataTransfer) {
         event.dataTransfer.setData('application/vueflow', JSON.stringify(node))
         event.dataTransfer.effectAllowed = 'move'
@@ -45,7 +52,7 @@ export default defineComponent({
   {
     return {
       loading: false,
-      data: []
+      data: [] as Node[]
     }
   },
   created()

core/datacap-ui/src/views/pages/admin/dashboard/components/DashboardEditor.vue

@@ -37,6 +37,12 @@ import { v4 as uuidv4 } from 'uuid'
 import { Background } from '@vue-flow/background'
 import DashboardNode from '@/views/pages/admin/dashboard/components/DashboardNode.vue'
 import DashboardChart from '@/views/pages/admin/dashboard/components/DashboardChart.vue'
+import { DashboardModel } from '@/model/dashboard'
+
+interface ReportNode
+{
+  id: number
+}
 
 export default defineComponent({
   name: 'DashboardEditor',
@@ -50,7 +56,7 @@ export default defineComponent({
       default: () => ref([])
     },
     sourceConfigure: {
-      type: Object
+      type: Object as () => DashboardModel | null
     }
   },
   setup(props, {emit})
@@ -61,12 +67,12 @@ export default defineComponent({
       name: props.sourceConfigure ? props.sourceConfigure.name : null,
       configure: null,
       version: 'V1',
-      reports: []
+      reports: [] as ReportNode[]
     });
 
     const {findNode, onConnect, addEdges, addNodes, project, vueFlowRef, setTransform, toObject} = useVueFlow({nodes: []})
 
-    props.elements.forEach((item) => {
+    props.elements.forEach((item: any) => {
       const newNode = {id: item.id, position: item.position, label: item.label, type: 'resizable', data: item.data}
       addNodes([newNode])
     })
@@ -74,13 +80,13 @@ export default defineComponent({
     onConnect((params: any) => addEdges(params))
 
     const onDrop = (event: { dataTransfer: { getData: (arg0: string) => any; }; clientX: number; clientY: number; }) => {
-      const data = JSON.parse(event.dataTransfer?.getData('application/vueflow'));
-      const {left, top} = vueFlowRef.value.getBoundingClientRect();
-      const position = project({x: event.clientX - left, y: event.clientY - top});
+      const data = JSON.parse(event.dataTransfer?.getData('application/vueflow'))
+      const {left, top} = (vueFlowRef.value as any).getBoundingClientRect()
+      const position = project({x: event.clientX - left, y: event.clientY - top})
       const newNode = {id: `${uuidv4()}`, position, label: `${data.name}`, type: 'resizable', data: data}
       addNodes([newNode])
       nextTick(() => {
-        const node = findNode(newNode.id)
+        const node = findNode(newNode.id) as any
         const stop = watch(
             () => node.dimensions,
             (dimensions) => {
@@ -94,7 +100,7 @@ export default defineComponent({
       })
     }
 
-    const onDragOver = (event: { preventDefault: () => void; dataTransfer: { dropEffect: string; }; }) => {
+    const onDragOver = (event: any) => {
       event.preventDefault()
       if (event.dataTransfer) {
         event.dataTransfer.dropEffect = 'move'
@@ -106,14 +112,15 @@ export default defineComponent({
     }
 
     const saveConfigure = (configure: any, opened: boolean) => {
-      configureVisible.value = opened;
+      configureVisible.value = opened
       if (!opened) {
         const obj = toObject()
-        configure.configure = JSON.stringify(obj);
-        obj.nodes.forEach((item: { data: { id: any } }) => {
-          configure.reports.push({id: item.data.id})
+        configure.configure = JSON.stringify(obj)
+        obj.nodes.forEach((item) => {
+          const node: ReportNode = {id: item.data.id}
+          configure.reports.push(node)
         })
-        emit('onCommit', configure);
+        emit('onCommit', configure)
       }
     }
 

core/datacap-ui/src/views/pages/admin/dashboard/components/DashboardNode.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <NodeResizer min-width="100" min-height="30"/>
+    <NodeResizer :min-width="100" :min-height="30"/>
     <EchartsPreview :width="'250px'" :height="'200px'" :id="id" :configure="configure"/>
   </div>
 </template>
@@ -8,13 +8,14 @@
 import { defineComponent } from 'vue'
 import { NodeResizer } from '@vue-flow/node-resizer'
 import EchartsPreview from '@/views/components/echarts/EchartsPreview.vue'
+import { ChartConfigure } from '@/views/components/echarts/configure/ChartConfigure'
 
 export default defineComponent({
   name: 'DashboardNode',
   components: {NodeResizer, EchartsPreview},
   props: {
     configure: {
-      type: Object
+      type: Object as () => ChartConfigure | null
     },
     id: {
       type: Number

core/datacap-ui/src/views/pages/admin/dataset/DatasetAdhoc.vue

@@ -47,7 +47,7 @@
                     <TooltipProvider>
                       <Tooltip>
                         <TooltipTrigger as-child>
-                          <Cog class="pointer" size="15" @click="handlerColumnConfigure(true, element, ColumnType.METRIC)"/>
+                          <Cog class="pointer" :size="15" @click="handlerColumnConfigure(true, element, ColumnType.METRIC)"/>
                         </TooltipTrigger>
                         <TooltipContent>
                           {{ $t('common.configure') }}
@@ -57,7 +57,7 @@
                     <TooltipProvider>
                       <Tooltip>
                         <TooltipTrigger as-child>
-                          <Trash class="point ml-1" size="15" @click="handlerRemove(index, metrics)"/>
+                          <Trash class="point ml-1" :size="15" @click="handlerRemove(index, metrics)"/>
                         </TooltipTrigger>
                         <TooltipContent>
                           {{ $t('common.remove') }}
@@ -80,7 +80,7 @@
                     <TooltipProvider>
                       <Tooltip>
                         <TooltipTrigger as-child>
-                          <Cog class="pointer" size="15" @click="handlerColumnConfigure(true, element, ColumnType.DIMENSION)"/>
+                          <Cog class="pointer" :size="15" @click="handlerColumnConfigure(true, element, ColumnType.DIMENSION)"/>
                         </TooltipTrigger>
                         <TooltipContent>
                           {{ $t('common.configure') }}
@@ -90,7 +90,7 @@
                     <TooltipProvider>
                       <Tooltip>
                         <TooltipTrigger as-child>
-                          <Trash class="point ml-1" size="15" @click="handlerRemove(index, dimensions)"/>
+                          <Trash class="point ml-1" :size="15" @click="handlerRemove(index, dimensions)"/>
                         </TooltipTrigger>
                         <TooltipContent>
                           {{ $t('common.remove') }}
@@ -113,7 +113,7 @@
                     <TooltipProvider>
                       <Tooltip>
                         <TooltipTrigger as-child>
-                          <Cog class="pointer" size="15" @click="handlerColumnConfigure(true, element, ColumnType.FILTER)"/>
+                          <Cog class="pointer" :size="15" @click="handlerColumnConfigure(true, element, ColumnType.FILTER)"/>
                         </TooltipTrigger>
                         <TooltipContent>
                           {{ $t('common.configure') }}
@@ -123,7 +123,7 @@
                     <TooltipProvider>
                       <Tooltip>
                         <TooltipTrigger as-child>
-                          <Trash class="point ml-1" size="15" @click="handlerRemove(index, filters)"/>
+                          <Trash class="point ml-1" :size="15" @click="handlerRemove(index, filters)"/>
                         </TooltipTrigger>
                         <TooltipContent>
                           {{ $t('common.remove') }}
@@ -157,7 +157,7 @@
           <Separator class="p-0" style="margin-top: 20px;"/>
         </div>
         <!-- Result -->
-        <div class="flex">
+        <div class="flex h-full">
           <div class="left flex-1 justify-center">
             <CircularLoading v-if="loading" :show="loading"/>
             <VisualEditor v-else :configuration="configuration" @commitOptions="handlerCommitOptions"/>
@@ -167,7 +167,7 @@
               <CardHeader class="p-2 border-b text-center">
                 <CardTitle>{{ $t('dataset.common.visualType') }}</CardTitle>
               </CardHeader>
-              <CardContent class="pt-2">
+              <CardContent v-if="configuration" class="pt-2">
                 <ToggleGroup v-model="configuration.type" type="single">
                   <div class="toggle-group-row">
                     <ToggleGroupItem class="mr-1" :value="Type.TABLE">
@@ -260,7 +260,7 @@
               <CardHeader class="p-2 border-b text-center">
                 <CardTitle>{{ $t('dataset.common.visualConfigure') }}</CardTitle>
               </CardHeader>
-              <CardContent class="pt-2">
+              <CardContent v-if="configuration" class="pt-2">
                 <DatasetVisualConfigureLine v-if="configuration.type === Type.LINE" :columns="configuration.headers" @commit="handlerCommit"/>
                 <DatasetVisualConfigureBar v-else-if="configuration.type === Type.BAR" :columns="configuration.headers" @commit="handlerCommit"/>
                 <DatasetVisualConfigureArea v-else-if="configuration.type === Type.AREA" :columns="configuration.headers" @commit="handlerCommit"/>
@@ -285,7 +285,7 @@
       <AlertDialogHeader>
         <AlertDialogTitle class="border-b -mt-4 pb-2">{{ $t('common.configure') }}</AlertDialogTitle>
       </AlertDialogHeader>
-      <FormField class="flex items-center">
+      <FormField class="flex items-center" name="name">
         <FormItem class="flex-1">
           <div class="flex items-center">
             <FormLabel class="mr-1 w-20 text-right">
@@ -340,7 +340,7 @@ import { ToggleGroup, ToggleGroupItem } from '@/components/ui/toggle-group'
 import { Alert, AlertTitle } from '@/components/ui/alert'
 import { ToastUtils } from '@/utils/toast'
 import SqlInfo from '@/views/components/sql/SqlInfo.vue'
-import { AlertDialog, AlertDialogFooter, AlertDialogHeader, AlertDialogContent } from '@/components/ui/alert-dialog'
+import { AlertDialog, AlertDialogContent, AlertDialogFooter, AlertDialogHeader } from '@/components/ui/alert-dialog'
 import { FormControl, FormField, FormItem, FormLabel } from '@/components/ui/form'
 import { Select } from '@/components/ui/select'
 
@@ -403,13 +403,13 @@ export default defineComponent({
       configuration: null as Configuration | null,
       showSql: {
         visible: false,
-        content: null
+        content: null as string | null
       },
       columnContent: {
         visible: false,
         type: null as ColumnType | null,
         content: [] as never[],
-        configure: null
+        configure: null as any | null
       },
       isPublish: false,
       commitOptions: null,
@@ -500,7 +500,7 @@ export default defineComponent({
     {
       return cloneDeep(value)
     },
-    handlerRemove(index: number, array: [])
+    handlerRemove(index: number, array: never[])
     {
       array.splice(index, 1)
       this.handlerApplyAdhoc()

core/datacap-ui/src/views/pages/admin/dataset/DatasetHome.vue

@@ -36,7 +36,7 @@
             <DropdownMenu>
               <DropdownMenuTrigger as-child>
                 <Button variant="outline">
-                  <Cog class="w-full justify-center" size="20"/>
+                  <Cog class="w-full justify-center" :size="20"/>
                 </Button>
               </DropdownMenuTrigger>
               <DropdownMenuContent>

core/datacap-ui/src/views/pages/admin/dataset/components/DatasetState.vue

@@ -1,6 +1,6 @@
 <template>
-  <div v-for="state in states" :key="state">
-    <Alert class="flex items-center" v-if="state === 'START'">
+  <div v-for="state in states">
+    <Alert class="flex items-center" v-if="(state as string) === 'START'">
       <AlertTitle class="flex-grow">
         {{ $t('dataset.common.stateOfStarted') }}
       </AlertTitle>
@@ -8,28 +8,28 @@
         {{ $t('dataset.complete') }}
       </AlertDescription>
     </Alert>
-    <Alert class="flex items-center mt-2" v-else-if="state.startsWith('METADATA_')">
+    <Alert class="flex items-center mt-2" v-else-if="(state as string).startsWith('METADATA_')">
       <AlertTitle class="flex-grow">
         {{ $t('dataset.common.stateOfMetadata') }}
       </AlertTitle>
       <AlertDescription class="ml-4">
-        <span v-if="state.endsWith('SUCCESS')" class="content">
+        <span v-if="(state as string).endsWith('SUCCESS')" class="content">
           {{ $t('dataset.common.complete') }}
         </span>
-        <span v-else-if="state.endsWith('FAILED')" class="content">
+        <span v-else-if="(state as string).endsWith('FAILED')" class="content">
           {{ $t('dataset.common.failed') }}
         </span>
       </AlertDescription>
     </Alert>
-    <Alert class="flex items-center mt-2" v-else-if="state.startsWith('TABLE_')">
+    <Alert class="flex items-center mt-2" v-else-if="(state as string).startsWith('TABLE_')">
       <AlertTitle class="flex-grow">
         {{ $t('dataset.common.stateOfCreateTable') }}
       </AlertTitle>
       <AlertDescription class="ml-4">
-        <span v-if="state.endsWith('SUCCESS')" class="content">
+        <span v-if="(state as string).endsWith('SUCCESS')" class="content">
           {{ $t('dataset.common.complete') }}
         </span>
-        <span v-else-if="state.endsWith('FAILED')" class="content">
+        <span v-else-if="(state as string).endsWith('FAILED')" class="content">
           {{ $t('dataset.common.failed') }}
         </span>
       </AlertDescription>

core/datacap-ui/src/views/pages/admin/dataset/components/adhoc/DatasetColumnConfigure.vue

@@ -5,112 +5,115 @@
         <AlertDialogHeader>
           <AlertDialogTitle class="border-b -mt-4 pb-2">{{ title }}</AlertDialogTitle>
         </AlertDialogHeader>
-        <div v-if="columnType === 'FILTER'">
-          <FormField class="flex items-center">
-            <FormItem class="flex-1">
-              <div class="flex items-center">
-                <FormLabel class="mr-1 w-40 text-right">
-                  {{ $t('common.expression') }}
-                </FormLabel>
-                <FormControl>
-                  <Select v-model="formState.expression">
-                    <SelectTrigger class="w-full">
-                      <SelectValue :placeholder="$t('dataset.tip.selectExpressionTip')"/>
-                    </SelectTrigger>
-                    <SelectContent>
-                      <SelectItem :value="Expression.IS_NULL">{{ $t('dataset.common.columnExpressionIsNull') }}</SelectItem>
-                      <SelectItem :value="Expression.IS_NOT_NULL">{{ $t('dataset.common.columnExpressionIsNotNull') }}</SelectItem>
-                      <SelectItem :value="Expression.IS_LIKE">{{ $t('dataset.common.columnExpressionIsLike') }}</SelectItem>
-                      <SelectItem :value="Expression.IS_NOT_LIKE">{{ $t('dataset.common.columnExpressionIsNotLike') }}</SelectItem>
-                      <SelectItem :value="Expression.EQ">{{ $t('dataset.common.columnExpressionEquals') }}</SelectItem>
-                      <SelectItem :value="Expression.NE">{{ $t('dataset.common.columnExpressionNotEquals') }}</SelectItem>
-                      <SelectItem :value="Expression.GT">{{ $t('dataset.common.columnExpressionGreaterThan') }}</SelectItem>
-                      <SelectItem :value="Expression.GTE">{{ $t('dataset.common.columnExpressionGreaterThanOrEquals') }}</SelectItem>
-                      <SelectItem :value="Expression.LT">{{ $t('dataset.common.columnExpressionLessThan') }}</SelectItem>
-                      <SelectItem :value="Expression.LTE">{{ $t('dataset.common.columnExpressionLessThanOrEquals') }}</SelectItem>
-                    </SelectContent>
-                  </Select>
-                </FormControl>
-              </div>
-            </FormItem>
-          </FormField>
-          <FormField v-if="formState.expression && formState.expression !== Expression.IS_NULL && formState.expression !== Expression.IS_NOT_NULL" class="flex items-center">
-            <FormItem class="flex-1 mt-3">
-              <div class="flex items-center">
-                <FormLabel class="mr-1 w-40 text-right">
-                  {{ $t('common.value') }}
-                </FormLabel>
-                <FormControl>
-                  <Input v-model="formState.value"/>
-                </FormControl>
-              </div>
-            </FormItem>
-          </FormField>
-        </div>
-        <div v-else>
-          <FormField v-if="columnType === 'METRIC'" class="flex items-center">
-            <FormItem class="flex-1">
-              <div class="flex items-center">
-                <FormLabel class="mr-1 w-40 text-right">
-                  {{ $t('common.expression') }}
-                </FormLabel>
-                <FormControl>
-                  <Select v-model="formState.expression">
-                    <SelectTrigger class="w-full">
-                      <SelectValue :placeholder="$t('dataset.tip.selectExpressionTip')"/>
-                    </SelectTrigger>
-                    <SelectContent>
-                      <SelectItem v-if="formState.type === ColumnType.NUMBER" :value="Expression.SUM"> {{ $t('dataset.common.columnExpressionSum') }}</SelectItem>
-                      <SelectItem :value="Expression.COUNT">{{ $t('dataset.common.columnExpressionCount') }}</SelectItem>
-                      <SelectItem :value="Expression.MAX">{{ $t('dataset.common.columnExpressionMax') }}</SelectItem>
-                      <SelectItem :value="Expression.MIN">{{ $t('dataset.common.columnExpressionMin') }}</SelectItem>
-                      <SelectItem v-if="formState.type === ColumnType.NUMBER" :value="Expression.AVG">{{ $t('dataset.common.columnExpressionAvg') }}</SelectItem>
-                    </SelectContent>
-                  </Select>
-                </FormControl>
-              </div>
-            </FormItem>
-          </FormField>
-          <FormField class="flex items-center">
-            <FormItem class="flex-1 mt-3">
-              <div class="flex items-center">
-                <FormLabel class="mr-1 w-40 text-right">
-                  {{ $t('common.alias') }}
-                </FormLabel>
-                <FormControl>
-                  <Input v-model="formState.alias"/>
-                </FormControl>
-              </div>
-            </FormItem>
-          </FormField>
-          <FormField class="flex items-center">
-            <FormItem class="flex-1 mt-3">
-              <div class="flex items-center">
-                <FormLabel class="mr-1 w-[25%] text-right">
-                  {{ $t('common.sort') }}
-                </FormLabel>
-                <FormControl>
-                  <ToggleGroup v-model="formState.order" type="single">
-                    <ToggleGroupItem value="">{{ $t('dataset.common.columnSortNone') }}</ToggleGroupItem>
-                    <ToggleGroupItem value="ASC">{{ $t('dataset.common.columnOrderAsc') }}</ToggleGroupItem>
-                    <ToggleGroupItem value="DESC">{{ $t('dataset.common.columnOrderDesc') }}</ToggleGroupItem>
-                  </ToggleGroup>
-                </FormControl>
-              </div>
-            </FormItem>
-          </FormField>
-          <FormField v-if="columnType === 'DIMENSION'" class="flex items-center">
-            <FormItem class="flex-1 mt-3">
-              <div class="flex items-center">
-                <FormLabel class="mr-1 w-40 text-right">
-                  {{ $t('dataset.common.customFunction') }}
-                </FormLabel>
-                <FormControl>
-                  <Input v-model="formState.function"/>
-                </FormControl>
-              </div>
-            </FormItem>
-          </FormField>
+        <div v-if="formState">
+          <div v-if="columnType === 'FILTER'">
+            <FormField class="flex items-center" name="expression">
+              <FormItem class="flex-1">
+                <div class="flex items-center">
+                  <FormLabel class="mr-1 w-40 text-right">
+                    {{ $t('common.expression') }}
+                  </FormLabel>
+                  <FormControl>
+                    <Select v-model="formState.expression">
+                      <SelectTrigger class="w-full">
+                        <SelectValue :placeholder="$t('dataset.tip.selectExpressionTip')"/>
+                      </SelectTrigger>
+                      <SelectContent>
+                        <SelectItem :value="Expression.IS_NULL">{{ $t('dataset.common.columnExpressionIsNull') }}</SelectItem>
+                        <SelectItem :value="Expression.IS_NOT_NULL">{{ $t('dataset.common.columnExpressionIsNotNull') }}</SelectItem>
+                        <SelectItem :value="Expression.IS_LIKE">{{ $t('dataset.common.columnExpressionIsLike') }}</SelectItem>
+                        <SelectItem :value="Expression.IS_NOT_LIKE">{{ $t('dataset.common.columnExpressionIsNotLike') }}</SelectItem>
+                        <SelectItem :value="Expression.EQ">{{ $t('dataset.common.columnExpressionEquals') }}</SelectItem>
+                        <SelectItem :value="Expression.NE">{{ $t('dataset.common.columnExpressionNotEquals') }}</SelectItem>
+                        <SelectItem :value="Expression.GT">{{ $t('dataset.common.columnExpressionGreaterThan') }}</SelectItem>
+                        <SelectItem :value="Expression.GTE">{{ $t('dataset.common.columnExpressionGreaterThanOrEquals') }}</SelectItem>
+                        <SelectItem :value="Expression.LT">{{ $t('dataset.common.columnExpressionLessThan') }}</SelectItem>
+                        <SelectItem :value="Expression.LTE">{{ $t('dataset.common.columnExpressionLessThanOrEquals') }}</SelectItem>
+                      </SelectContent>
+                    </Select>
+                  </FormControl>
+                </div>
+              </FormItem>
+            </FormField>
+            <FormField v-if="formState.expression && formState.expression !== Expression.IS_NULL && formState.expression !== Expression.IS_NOT_NULL" class="flex items-center"
+                       name="value">
+              <FormItem class="flex-1 mt-3">
+                <div class="flex items-center">
+                  <FormLabel class="mr-1 w-40 text-right">
+                    {{ $t('common.value') }}
+                  </FormLabel>
+                  <FormControl>
+                    <Input v-model="formState.value"/>
+                  </FormControl>
+                </div>
+              </FormItem>
+            </FormField>
+          </div>
+          <div v-else>
+            <FormField v-if="columnType === 'METRIC'" class="flex items-center" name="expression">
+              <FormItem class="flex-1">
+                <div class="flex items-center">
+                  <FormLabel class="mr-1 w-40 text-right">
+                    {{ $t('common.expression') }}
+                  </FormLabel>
+                  <FormControl>
+                    <Select v-model="formState.expression">
+                      <SelectTrigger class="w-full">
+                        <SelectValue :placeholder="$t('dataset.tip.selectExpressionTip')"/>
+                      </SelectTrigger>
+                      <SelectContent>
+                        <SelectItem v-if="formState.type === ColumnType.NUMBER" :value="Expression.SUM"> {{ $t('dataset.common.columnExpressionSum') }}</SelectItem>
+                        <SelectItem :value="Expression.COUNT">{{ $t('dataset.common.columnExpressionCount') }}</SelectItem>
+                        <SelectItem :value="Expression.MAX">{{ $t('dataset.common.columnExpressionMax') }}</SelectItem>
+                        <SelectItem :value="Expression.MIN">{{ $t('dataset.common.columnExpressionMin') }}</SelectItem>
+                        <SelectItem v-if="formState.type === ColumnType.NUMBER" :value="Expression.AVG">{{ $t('dataset.common.columnExpressionAvg') }}</SelectItem>
+                      </SelectContent>
+                    </Select>
+                  </FormControl>
+                </div>
+              </FormItem>
+            </FormField>
+            <FormField class="flex items-center" name="alias">
+              <FormItem class="flex-1 mt-3">
+                <div class="flex items-center">
+                  <FormLabel class="mr-1 w-40 text-right">
+                    {{ $t('common.alias') }}
+                  </FormLabel>
+                  <FormControl>
+                    <Input v-model="formState.alias"/>
+                  </FormControl>
+                </div>
+              </FormItem>
+            </FormField>
+            <FormField class="flex items-center" name="order">
+              <FormItem class="flex-1 mt-3">
+                <div class="flex items-center">
+                  <FormLabel class="mr-1 w-[25%] text-right">
+                    {{ $t('common.sort') }}
+                  </FormLabel>
+                  <FormControl>
+                    <ToggleGroup v-model="formState.order" type="single">
+                      <ToggleGroupItem value="">{{ $t('dataset.common.columnSortNone') }}</ToggleGroupItem>
+                      <ToggleGroupItem value="ASC">{{ $t('dataset.common.columnOrderAsc') }}</ToggleGroupItem>
+                      <ToggleGroupItem value="DESC">{{ $t('dataset.common.columnOrderDesc') }}</ToggleGroupItem>
+                    </ToggleGroup>
+                  </FormControl>
+                </div>
+              </FormItem>
+            </FormField>
+            <FormField v-if="columnType === 'DIMENSION'" class="flex items-center" name="function">
+              <FormItem class="flex-1 mt-3">
+                <div class="flex items-center">
+                  <FormLabel class="mr-1 w-40 text-right">
+                    {{ $t('dataset.common.customFunction') }}
+                  </FormLabel>
+                  <FormControl>
+                    <Input v-model="formState.function"/>
+                  </FormControl>
+                </div>
+              </FormItem>
+            </FormField>
+          </div>
         </div>
         <AlertDialogFooter class="-mb-4 border-t pt-2">
           <Button @click="handlerCancel">{{ $t('common.cancel') }}</Button>
@@ -142,18 +145,7 @@ import { FormControl, FormDescription, FormField, FormItem, FormLabel } from '@/
 import { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectTrigger, SelectValue } from '@/components/ui/select'
 import { Input } from '@/components/ui/input'
 import { ToggleGroup, ToggleGroupItem } from '@/components/ui/toggle-group'
-
-interface Model
-{
-  id: number
-  type: string
-  alias: string
-  expression: string
-  order: string
-  function: string
-  value: string
-  mode: string
-}
+import { Model } from '../../model/model'
 
 export default defineComponent({
   name: 'DatasetColumnConfigure',
@@ -171,7 +163,7 @@ export default defineComponent({
       default: () => false
     },
     columnType: {
-      type: String as unknown as PropType<Type>,
+      type: String as unknown as PropType<Type | null>,
       default: () => Type.DIMENSION
     },
     content: {
@@ -179,18 +171,18 @@ export default defineComponent({
       default: () => null
     },
     configure: {
-      type: Object
+      type: Object as () => any
     }
   },
   computed: {
     visible: {
       get(): boolean
       {
-        return this.isVisible;
+        return this.isVisible
       },
       set(value: boolean)
       {
-        this.$emit('close', value);
+        this.$emit('close', value)
       }
     },
     Expression()
@@ -229,7 +221,6 @@ export default defineComponent({
         if (this.configure) {
           const cloneValue = cloneDeep(this.configure) as Model
           this.formState = cloneValue
-          console.log(cloneValue)
         }
         else {
           this.formState.id = this.content.id

core/datacap-ui/src/views/pages/admin/dataset/components/adhoc/DatasetColumnMetric.vue

@@ -1,6 +1,6 @@
 <template>
-  <span>{{ element.aliasName ? element.aliasName : element.name }}</span>
-  <span v-if="element.expression">
+  <span>{{ element?.aliasName ? element?.aliasName : element?.name }}</span>
+  <span v-if="element?.expression">
       (
       <Text strong v-if="element.expression === Expression.SUM">
         {{ $t('dataset.common.columnExpressionSum') }}

core/datacap-ui/src/views/pages/admin/dataset/components/adhoc/DatasetVisualConfigureArea.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <FormField class="flex items-center">
+    <FormField class="flex items-center" name="xAxis">
       <FormItem class="flex-1">
         <div class="flex items-center">
           <FormLabel class="mr-1 w-2/3 text-right">
@@ -12,7 +12,7 @@
                 <SelectValue placeholder="Select"/>
               </SelectTrigger>
               <SelectContent>
-                <SelectItem v-for="item in columns" :value="item">
+                <SelectItem v-for="item in columns" :value="item as string">
                   {{ item }}
                 </SelectItem>
               </SelectContent>
@@ -21,7 +21,7 @@
         </div>
       </FormItem>
     </FormField>
-    <FormField class="flex items-center">
+    <FormField class="flex items-center" name="yAxis">
       <FormItem class="flex-1">
         <div class="flex items-center mt-2 text-right">
           <FormLabel class="mr-1 w-2/3">
@@ -33,7 +33,7 @@
                 <SelectValue placeholder="Select"/>
               </SelectTrigger>
               <SelectContent>
-                <SelectItem v-for="item in columns" :value="item">
+                <SelectItem v-for="item in columns" :value="item as string">
                   {{ item }}
                 </SelectItem>
               </SelectContent>
@@ -72,8 +72,8 @@ export default defineComponent({
   {
     return {
       formState: {
-        xAxis: null,
-        yAxis: null
+        xAxis: undefined,
+        yAxis: undefined
       }
     }
   },

core/datacap-ui/src/views/pages/admin/dataset/components/adhoc/DatasetVisualConfigureBar.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <FormField class="flex items-center">
+    <FormField class="flex items-center" name="xAxis">
       <FormItem class="flex-1">
         <div class="flex items-center">
           <FormLabel class="mr-1 w-2/3 text-right">
@@ -12,7 +12,7 @@
                 <SelectValue placeholder="Select"/>
               </SelectTrigger>
               <SelectContent>
-                <SelectItem v-for="item in columns" :value="item">
+                <SelectItem v-for="item in columns" :value="item as string">
                   {{ item }}
                 </SelectItem>
               </SelectContent>
@@ -21,7 +21,7 @@
         </div>
       </FormItem>
     </FormField>
-    <FormField class="flex items-center">
+    <FormField class="flex items-center" name="yAxis">
       <FormItem class="flex-1">
         <div class="flex items-center mt-2 text-right">
           <FormLabel class="mr-1 w-2/3">
@@ -33,7 +33,7 @@
                 <SelectValue placeholder="Select"/>
               </SelectTrigger>
               <SelectContent>
-                <SelectItem v-for="item in columns" :value="item">
+                <SelectItem v-for="item in columns" :value="item as string">
                   {{ item }}
                 </SelectItem>
               </SelectContent>
@@ -72,8 +72,8 @@ export default defineComponent({
   {
     return {
       formState: {
-        xAxis: null,
-        yAxis: null
+        xAxis: undefined,
+        yAxis: undefined
       }
     }
   },

core/datacap-ui/src/views/pages/admin/dataset/components/adhoc/DatasetVisualConfigureHistogram.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <FormField class="flex items-center">
+    <FormField class="flex items-center" name="xAxis">
       <FormItem class="flex-1">
         <div class="flex items-center">
           <FormLabel class="mr-1 w-2/3 text-right">
@@ -12,7 +12,7 @@
                 <SelectValue placeholder="Select"/>
               </SelectTrigger>
               <SelectContent>
-                <SelectItem v-for="item in columns" :value="item">
+                <SelectItem v-for="item in columns" :value="item as string">
                   {{ item }}
                 </SelectItem>
               </SelectContent>
@@ -21,7 +21,7 @@
         </div>
       </FormItem>
     </FormField>
-    <FormField class="flex items-center">
+    <FormField class="flex items-center" name="x2Axis">
       <FormItem class="flex-1">
         <div class="flex items-center mt-2 text-right">
           <FormLabel class="mr-1 w-2/3">
@@ -33,7 +33,7 @@
                 <SelectValue placeholder="Select"/>
               </SelectTrigger>
               <SelectContent>
-                <SelectItem v-for="item in columns" :value="item">
+                <SelectItem v-for="item in columns" :value="item as string">
                   {{ item }}
                 </SelectItem>
               </SelectContent>
@@ -42,7 +42,7 @@
         </div>
       </FormItem>
     </FormField>
-    <FormField class="flex items-center">
+    <FormField class="flex items-center" name="yAxis">
       <FormItem class="flex-1">
         <div class="flex items-center mt-2 text-right">
           <FormLabel class="mr-1 w-2/3">
@@ -54,7 +54,7 @@
                 <SelectValue placeholder="Select"/>
               </SelectTrigger>
               <SelectContent>
-                <SelectItem v-for="item in columns" :value="item">
+                <SelectItem v-for="item in columns" :value="item as string">
                   {{ item }}
                 </SelectItem>
               </SelectContent>
@@ -93,9 +93,9 @@ export default defineComponent({
   {
     return {
       formState: {
-        xAxis: null,
-        x2Axis: null,
-        yAxis: null
+        xAxis: undefined,
+        x2Axis: undefined,
+        yAxis: undefined
       }
     }
   },

core/datacap-ui/src/views/pages/admin/dataset/components/adhoc/DatasetVisualConfigureLine.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <FormField class="flex items-center">
+    <FormField class="flex items-center" name="xAxis">
       <FormItem class="flex-1">
         <div class="flex items-center">
           <FormLabel class="mr-1 w-2/3 text-right">
@@ -12,7 +12,7 @@
                 <SelectValue placeholder="Select"/>
               </SelectTrigger>
               <SelectContent>
-                <SelectItem v-for="item in columns" :value="item">
+                <SelectItem v-for="item in columns" :value="item as string">
                   {{ item }}
                 </SelectItem>
               </SelectContent>
@@ -21,7 +21,7 @@
         </div>
       </FormItem>
     </FormField>
-    <FormField class="flex items-center">
+    <FormField class="flex items-center" name="yAxis">
       <FormItem class="flex-1">
         <div class="flex items-center mt-2 text-right">
           <FormLabel class="mr-1 w-2/3">
@@ -33,7 +33,7 @@
                 <SelectValue placeholder="Select"/>
               </SelectTrigger>
               <SelectContent>
-                <SelectItem v-for="item in columns" :value="item">
+                <SelectItem v-for="item in columns" :value="item as string">
                   {{ item }}
                 </SelectItem>
               </SelectContent>
@@ -42,7 +42,7 @@
         </div>
       </FormItem>
     </FormField>
-    <FormField class="flex items-center">
+    <FormField class="flex items-center" name="series">
       <FormItem class="flex-1">
         <div class="flex items-center mt-2 text-right">
           <FormLabel class="mr-1 w-2/3">
@@ -54,7 +54,7 @@
                 <SelectValue placeholder="Select"/>
               </SelectTrigger>
               <SelectContent>
-                <SelectItem v-for="item in columns" :value="item">
+                <SelectItem v-for="item in columns" :value="item as string">
                   {{ item }}
                 </SelectItem>
               </SelectContent>
@@ -63,7 +63,7 @@
         </div>
       </FormItem>
     </FormField>
-    <FormField class="flex items-center">
+    <FormField class="flex items-center" name="invalidType">
       <FormItem class="flex-1">
         <div class="flex items-center mt-2 text-right">
           <FormLabel class="mr-1 w-2/3">
@@ -123,10 +123,10 @@ export default defineComponent({
   {
     return {
       formState: {
-        xAxis: null,
-        yAxis: null,
-        series: null,
-        invalidType: null
+        xAxis: undefined,
+        yAxis: undefined,
+        series: undefined,
+        invalidType: undefined
       }
     }
   },

core/datacap-ui/src/views/pages/admin/dataset/components/adhoc/DatasetVisualConfigurePie.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <FormField class="flex items-center">
+    <FormField class="flex items-center" name="xAxis">
       <FormItem class="flex-1">
         <div class="flex items-center">
           <FormLabel class="mr-1 w-2/3 text-right">
@@ -12,7 +12,7 @@
                 <SelectValue placeholder="Select"/>
               </SelectTrigger>
               <SelectContent>
-                <SelectItem v-for="item in columns" :value="item">
+                <SelectItem v-for="item in columns" :value="item as string">
                   {{ item }}
                 </SelectItem>
               </SelectContent>
@@ -21,7 +21,7 @@
         </div>
       </FormItem>
     </FormField>
-    <FormField class="flex items-center">
+    <FormField class="flex items-center" name="yAxis">
       <FormItem class="flex-1">
         <div class="flex items-center mt-2 text-right">
           <FormLabel class="mr-1 w-2/3">
@@ -33,7 +33,7 @@
                 <SelectValue placeholder="Select"/>
               </SelectTrigger>
               <SelectContent>
-                <SelectItem v-for="item in columns" :value="item">
+                <SelectItem v-for="item in columns" :value="item as string">
                   {{ item }}
                 </SelectItem>
               </SelectContent>
@@ -42,14 +42,14 @@
         </div>
       </FormItem>
     </FormField>
-    <FormField class="flex items-center">
+    <FormField class="flex items-center" name="outerRadius">
       <FormItem class="flex-1">
         <div class="flex items-center mt-2 text-right">
           <FormLabel class="mr-1 w-2/3">
             {{ $t('dataset.common.visualConfigureOuterRadius') }}
           </FormLabel>
           <FormControl>
-            <Slider v-model="formState.outerRadius" :default-value="[formState.outerRadius]" :max="10" :step="0.1" :min="0.01"/>
+            <Slider v-model="formState.outerRadius" :default-value="formState.outerRadius" :max="10" :step="0.1" :min="0.01"/>
           </FormControl>
         </div>
       </FormItem>
@@ -86,8 +86,8 @@ export default defineComponent({
   {
     return {
       formState: {
-        xAxis: null,
-        yAxis: null,
+        xAxis: undefined,
+        yAxis: undefined,
         outerRadius: [0.8]
       }
     }

core/datacap-ui/src/views/pages/admin/dataset/components/adhoc/DatasetVisualConfigureWordCloud.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <FormField class="flex items-center">
+    <FormField class="flex items-center" name="xAxis">
       <FormItem class="flex-1">
         <div class="flex items-center">
           <FormLabel class="mr-1 w-2/3 text-right">
@@ -12,7 +12,7 @@
                 <SelectValue placeholder="Select"/>
               </SelectTrigger>
               <SelectContent>
-                <SelectItem v-for="item in columns" :value="item">
+                <SelectItem v-for="item in columns" :value="item as string">
                   {{ item }}
                 </SelectItem>
               </SelectContent>
@@ -21,7 +21,7 @@
         </div>
       </FormItem>
     </FormField>
-    <FormField class="flex items-center">
+    <FormField class="flex items-center" name="yAxis">
       <FormItem class="flex-1">
         <div class="flex items-center mt-2 text-right">
           <FormLabel class="mr-1 w-2/3">
@@ -33,7 +33,7 @@
                 <SelectValue placeholder="Select"/>
               </SelectTrigger>
               <SelectContent>
-                <SelectItem v-for="item in columns" :value="item">
+                <SelectItem v-for="item in columns" :value="item as string">
                   {{ item }}
                 </SelectItem>
               </SelectContent>
@@ -42,7 +42,7 @@
         </div>
       </FormItem>
     </FormField>
-    <FormField class="flex items-center">
+    <FormField class="flex items-center" name="series">
       <FormItem class="flex-1">
         <div class="flex items-center mt-2 text-right">
           <FormLabel class="mr-1 w-2/3">
@@ -54,7 +54,7 @@
                 <SelectValue placeholder="Select"/>
               </SelectTrigger>
               <SelectContent>
-                <SelectItem v-for="item in columns" :value="item">
+                <SelectItem v-for="item in columns" :value="item as string">
                   {{ item }}
                 </SelectItem>
               </SelectContent>
@@ -93,9 +93,9 @@ export default defineComponent({
   {
     return {
       formState: {
-        xAxis: null,
-        yAxis: null,
-        series: null
+        xAxis: undefined,
+        yAxis: undefined,
+        series: undefined
       }
     }
   },

core/datacap-ui/src/views/pages/admin/dataset/model/model.ts

@@ -0,0 +1,11 @@
+export interface Model
+{
+    id: number
+    type: string
+    alias: string
+    expression: string
+    order: string
+    function: string
+    value: string
+    mode: string
+}