test/datacap
1
0
Fork 0
mirror of https://gitee.com/devlive-community/datacap.git synced 2024-12-02 12:07:37 +08:00
Code Issues Actions 3 Packages Projects Releases Wiki Activity

[Core] [Visual] Fix the problem that the configuration is not echoed

Browse Source
This commit is contained in:
qianmoQ 2024-04-14 14:02:21 +08:00
parent f83d9c0c11
commit 77718a991c
9 changed files with 137 additions and 75 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
core/datacap-service/src/main/java/io/edurt/datacap/service/service/SnippetService.java
View File

@ -5,4 +5,4 @@ import io.edurt.datacap.service.entity.SnippetEntity;
public interface SnippetService
extends BaseService<SnippetEntity>
{
}
}

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

@ -24,10 +24,10 @@ export class ConfigurationRequest
export interface IChart
{
xAxis?: null | string
x2Axis?: null | string
yAxis?: null | string
series?: null | string
xAxis?: string
x2Axis?: string
yAxis?: string
series?: string
outerRadius?: number[]
invalidType?: null | string
invalidType?: string
}

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

@ -19,7 +19,8 @@
<div class="right w-[210px] space-y-2">
<Card body-class="p-2">
<template #title>{{ $t('dataset.common.visualType') }}</template>
<div v-if="configuration">
<CircularLoading v-if="loading" :show="loading"/>
<div v-else-if="configuration">
<ToggleGroup v-model="configuration.type" type="single">
<div class="grid grid-cols-4 items-center space-x-1 space-y-1">
<ToggleGroupItem class="mt-1" :value="Type.TABLE">
@ -63,13 +64,14 @@
</Card>
<Card body-class="p-2">
<template #title>{{ $t('dataset.common.visualConfigure') }}</template>
<div v-if="configuration">
<VisualLineConfigure v-if="configuration.type === Type.LINE" :columns="configuration.headers" @change="configuration.chartConfigure = $event"/>
<VisualBarConfigure v-else-if="configuration.type === Type.BAR" :columns="configuration.headers" @change="configuration.chartConfigure = $event"/>
<VisualAreaConfigure v-else-if="configuration.type === Type.AREA" :columns="configuration.headers" @change="configuration.chartConfigure = $event"/>
<VisualPieConfigure v-else-if="configuration.type === Type.PIE" :columns="configuration.headers" @change="configuration.chartConfigure = $event"/>
<VisualHistogramConfigure v-else-if="configuration.type === Type.HISTOGRAM" :columns="configuration.headers" @change="configuration.chartConfigure = $event"/>
<VisualWordCloudConfigure v-else-if="configuration.type === Type.WORDCLOUD" :columns="configuration.headers" @change="configuration.chartConfigure = $event"/>
<CircularLoading v-if="loading" :show="loading"/>
<div v-else-if="configuration">
<VisualLineConfigure v-if="configuration.type === Type.LINE" :configuration="configuration" @change="configuration.chartConfigure = $event"/>
<VisualBarConfigure v-else-if="configuration.type === Type.BAR" :configuration="configuration" @change="configuration.chartConfigure = $event"/>
<VisualAreaConfigure v-else-if="configuration.type === Type.AREA" :configuration="configuration" @change="configuration.chartConfigure = $event"/>
<VisualPieConfigure v-else-if="configuration.type === Type.PIE" :configuration="configuration" @change="configuration.chartConfigure = $event"/>
<VisualHistogramConfigure v-else-if="configuration.type === Type.HISTOGRAM" :configuration="configuration" @change="configuration.chartConfigure = $event"/>
<VisualWordCloudConfigure v-else-if="configuration.type === Type.WORDCLOUD" :configuration="configuration" @change="configuration.chartConfigure = $event"/>
<Alert v-else :title="$t('dataset.common.visualConfigureNotSpecified')"/>
</div>
</Card>

30
core/datacap-ui/src/views/components/visual/components/VisualAreaConfigure.vue
View File

@ -1,5 +1,5 @@
<template>
<div>
<div v-if="configuration && formState" class="space-y-2">
<FormField class="flex items-center" name="xAxis">
<FormItem class="flex-1">
<div class="flex items-center">
@ -7,12 +7,12 @@
{{ $t('dataset.common.visualConfigureXAxis') }}
</FormLabel>
<FormControl>
<Select v-model="formState.xAxis" :disabled="columns.length === 0">
<Select v-model="formState.xAxis" :disabled="configuration.headers.length === 0">
<SelectTrigger class="w-full">
<SelectValue placeholder="Select"/>
</SelectTrigger>
<SelectContent>
<SelectItem v-for="item in columns" :value="item as string">
<SelectItem v-for="item in configuration.headers" :value="item as string">
{{ item }}
</SelectItem>
</SelectContent>
@ -25,15 +25,15 @@
<FormItem class="flex-1">
<div class="flex items-center mt-2 text-right">
<FormLabel class="mr-1 w-2/3">
{{ $t('dataset.common.visualConfigureXAxis') }}
{{ $t('dataset.common.visualConfigureYAxis') }}
</FormLabel>
<FormControl>
<Select v-model="formState.yAxis" :disabled="columns.length === 0">
<Select v-model="formState.yAxis" :disabled="configuration.headers.length === 0">
<SelectTrigger class="w-full">
<SelectValue placeholder="Select"/>
</SelectTrigger>
<SelectContent>
<SelectItem v-for="item in columns" :value="item as string">
<SelectItem v-for="item in configuration.headers" :value="item as string">
{{ item }}
</SelectItem>
</SelectContent>
@ -49,6 +49,8 @@
import { defineComponent } from 'vue'
import { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectTrigger, SelectValue } from '@/components/ui/select'
import { FormControl, FormDescription, FormField, FormItem, FormLabel } from '@/components/ui/form'
import { Configuration, IChart } from '@/views/components/visual/Configuration.ts'
import { cloneDeep, keys } from 'lodash'
export default defineComponent({
name: 'VisualAreaConfigure',
@ -57,9 +59,8 @@ export default defineComponent({
FormDescription, FormControl, FormLabel, FormField, FormItem
},
props: {
columns: {
type: Array,
default: () => []
configuration: {
type: Object as () => Configuration
}
},
watch: {
@ -71,7 +72,16 @@ export default defineComponent({
data()
{
return {
formState: {
formState: null as IChart | null
}
},
created()
{
if (this.configuration && keys(this.configuration.chartConfigure).length > 0) {
this.formState = cloneDeep(this.configuration.chartConfigure) as IChart
}
else {
this.formState = {
xAxis: undefined,
yAxis: undefined
}

28
core/datacap-ui/src/views/components/visual/components/VisualBarConfigure.vue
View File

@ -1,5 +1,5 @@
<template>
<div>
<div v-if="configuration && formState" class="space-y-2">
<FormField class="flex items-center" name="xAxis">
<FormItem class="flex-1">
<div class="flex items-center">
@ -7,12 +7,12 @@
{{ $t('dataset.common.visualConfigureXAxis') }}
</FormLabel>
<FormControl>
<Select v-model="formState.xAxis" :disabled="columns.length === 0">
<Select v-model="formState.xAxis" :disabled="configuration.headers.length === 0">
<SelectTrigger class="w-full">
<SelectValue placeholder="Select"/>
</SelectTrigger>
<SelectContent>
<SelectItem v-for="item in columns" :value="item as string">
<SelectItem v-for="item in configuration.headers" :value="item as string">
{{ item }}
</SelectItem>
</SelectContent>
@ -28,12 +28,12 @@
{{ $t('dataset.common.visualConfigureYAxis') }}
</FormLabel>
<FormControl>
<Select v-model="formState.yAxis" :disabled="columns.length === 0">
<Select v-model="formState.yAxis" :disabled="configuration.headers.length === 0">
<SelectTrigger class="w-full">
<SelectValue placeholder="Select"/>
</SelectTrigger>
<SelectContent>
<SelectItem v-for="item in columns" :value="item as string">
<SelectItem v-for="item in configuration.headers" :value="item as string">
{{ item }}
</SelectItem>
</SelectContent>
@ -49,6 +49,8 @@
import { defineComponent } from 'vue'
import { FormControl, FormDescription, FormField, FormItem, FormLabel } from '@/components/ui/form'
import { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectTrigger, SelectValue } from '@/components/ui/select'
import { Configuration, IChart } from '@/views/components/visual/Configuration.ts'
import { cloneDeep, keys } from 'lodash'
export default defineComponent({
name: 'VisualBarConfigure',
@ -57,9 +59,8 @@ export default defineComponent({
FormDescription, FormControl, FormLabel, FormField, FormItem
},
props: {
columns: {
type: Array,
default: () => []
configuration: {
type: Object as () => Configuration
}
},
watch: {
@ -71,7 +72,16 @@ export default defineComponent({
data()
{
return {
formState: {
formState: null as IChart | null
}
},
created()
{
if (this.configuration && keys(this.configuration.chartConfigure).length > 0) {
this.formState = cloneDeep(this.configuration.chartConfigure) as IChart
}
else {
this.formState = {
xAxis: undefined,
yAxis: undefined
}

32
core/datacap-ui/src/views/components/visual/components/VisualHistogramConfigure.vue
View File

@ -1,5 +1,5 @@
<template>
<div>
<div v-if="configuration && formState" class="space-y-2">
<FormField class="flex items-center" name="xAxis">
<FormItem class="flex-1">
<div class="flex items-center">
@ -7,12 +7,12 @@
{{ $t('dataset.common.visualConfigureCategoryLeftField') }}
</FormLabel>
<FormControl>
<Select v-model="formState.xAxis" :disabled="columns.length === 0">
<Select v-model="formState.xAxis" :disabled="configuration.headers.length === 0">
<SelectTrigger class="w-full">
<SelectValue placeholder="Select"/>
</SelectTrigger>
<SelectContent>
<SelectItem v-for="item in columns" :value="item as string">
<SelectItem v-for="item in configuration.headers" :value="item as string">
{{ item }}
</SelectItem>
</SelectContent>
@ -28,12 +28,12 @@
{{ $t('dataset.common.visualConfigureCategoryRightField') }}
</FormLabel>
<FormControl>
<Select v-model="formState.x2Axis" :disabled="columns.length === 0">
<Select v-model="formState.x2Axis" :disabled="configuration.headers.length === 0">
<SelectTrigger class="w-full">
<SelectValue placeholder="Select"/>
</SelectTrigger>
<SelectContent>
<SelectItem v-for="item in columns" :value="item as string">
<SelectItem v-for="item in configuration.headers" :value="item as string">
{{ item }}
</SelectItem>
</SelectContent>
@ -49,12 +49,12 @@
{{ $t('dataset.common.visualConfigureValueField') }}
</FormLabel>
<FormControl>
<Select v-model="formState.yAxis" :disabled="columns.length === 0">
<Select v-model="formState.yAxis" :disabled="configuration.headers.length === 0">
<SelectTrigger class="w-full">
<SelectValue placeholder="Select"/>
</SelectTrigger>
<SelectContent>
<SelectItem v-for="item in columns" :value="item as string">
<SelectItem v-for="item in configuration.headers" :value="item as string">
{{ item }}
</SelectItem>
</SelectContent>
@ -70,6 +70,8 @@
import { defineComponent } from 'vue'
import { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectTrigger, SelectValue } from '@/components/ui/select'
import { FormControl, FormDescription, FormField, FormItem, FormLabel } from '@/components/ui/form'
import { Configuration, IChart } from '@/views/components/visual/Configuration.ts'
import { cloneDeep, keys } from 'lodash'
export default defineComponent({
name: 'VisualHistogramConfigure',
@ -78,9 +80,8 @@ export default defineComponent({
FormDescription, FormControl, FormLabel, FormField, FormItem
},
props: {
columns: {
type: Array,
default: () => []
configuration: {
type: Object as () => Configuration
}
},
watch: {
@ -92,7 +93,16 @@ export default defineComponent({
data()
{
return {
formState: {
formState: null as IChart | null
}
},
created()
{
if (this.configuration && keys(this.configuration.chartConfigure).length > 0) {
this.formState = cloneDeep(this.configuration.chartConfigure) as IChart
}
else {
this.formState = {
xAxis: undefined,
x2Axis: undefined,
yAxis: undefined

32
core/datacap-ui/src/views/components/visual/components/VisualLineConfigure.vue
View File

@ -1,5 +1,5 @@
<template>
<div>
<div v-if="configuration && formState" class="space-y-2">
<FormField class="flex items-center" name="xAxis">
<FormItem class="flex-1">
<div class="flex items-center">
@ -7,12 +7,12 @@
{{ $t('dataset.common.visualConfigureCategoryField') }}
</FormLabel>
<FormControl>
<Select v-model="formState.xAxis" :disabled="columns.length === 0">
<Select v-model="formState.xAxis" :disabled="configuration.headers.length === 0">
<SelectTrigger class="w-full">
<SelectValue placeholder="Select"/>
</SelectTrigger>
<SelectContent>
<SelectItem v-for="item in columns" :value="item as string">
<SelectItem v-for="item in configuration.headers" :value="item as string">
{{ item }}
</SelectItem>
</SelectContent>
@ -28,12 +28,12 @@
{{ $t('dataset.common.visualConfigureValueField') }}
</FormLabel>
<FormControl>
<Select v-model="formState.yAxis" :disabled="columns.length === 0">
<Select v-model="formState.yAxis" :disabled="configuration.headers.length === 0">
<SelectTrigger class="w-full">
<SelectValue placeholder="Select"/>
</SelectTrigger>
<SelectContent>
<SelectItem v-for="item in columns" :value="item as string">
<SelectItem v-for="item in configuration.headers" :value="item as string">
{{ item }}
</SelectItem>
</SelectContent>
@ -49,12 +49,12 @@
{{ $t('dataset.common.visualConfigureSeriesField') }}
</FormLabel>
<FormControl>
<Select v-model="formState.series" :disabled="columns.length === 0">
<Select v-model="formState.series" :disabled="configuration.columns.length === 0">
<SelectTrigger class="w-full">
<SelectValue placeholder="Select"/>
</SelectTrigger>
<SelectContent>
<SelectItem v-for="item in columns" :value="item as string">
<SelectItem v-for="item in configuration.headers" :value="item as string">
{{ item }}
</SelectItem>
</SelectContent>
@ -100,6 +100,8 @@
import { defineComponent } from 'vue'
import { FormControl, FormDescription, FormField, FormItem, FormLabel } from '@/components/ui/form'
import { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectTrigger, SelectValue } from '@/components/ui/select'
import { Configuration, IChart } from '@/views/components/visual/Configuration.ts'
import { cloneDeep, keys } from 'lodash'
export default defineComponent({
name: 'VisualLineConfigure',
@ -108,9 +110,8 @@ export default defineComponent({
FormDescription, FormControl, FormLabel, FormField, FormItem
},
props: {
columns: {
type: Array,
default: () => []
configuration: {
type: Object as () => Configuration
}
},
watch: {
@ -122,7 +123,16 @@ export default defineComponent({
data()
{
return {
formState: {
formState: null as IChart | null
}
},
created()
{
if (this.configuration && keys(this.configuration.chartConfigure).length > 0) {
this.formState = cloneDeep(this.configuration.chartConfigure) as IChart
}
else {
this.formState = {
xAxis: undefined,
yAxis: undefined,
series: undefined,

28
core/datacap-ui/src/views/components/visual/components/VisualPieConfigure.vue
View File

@ -1,5 +1,5 @@
<template>
<div class="space-y-2">
<div v-if="configuration && formState" class="space-y-2">
<FormField class="flex items-center" name="xAxis">
<FormItem class="flex-1">
<div class="flex items-center">
@ -7,12 +7,12 @@
{{ $t('dataset.common.visualConfigureCategoryField') }}
</FormLabel>
<FormControl>
<Select v-model="formState.xAxis" :disabled="columns.length === 0">
<Select v-model="formState.xAxis" :disabled="configuration.headers.length === 0">
<SelectTrigger class="w-full">
<SelectValue placeholder="Select"/>
</SelectTrigger>
<SelectContent>
<SelectItem v-for="item in columns" :value="item as string">
<SelectItem v-for="item in configuration.headers" :value="item as string">
{{ item }}
</SelectItem>
</SelectContent>
@ -28,12 +28,12 @@
{{ $t('dataset.common.visualConfigureValueField') }}
</FormLabel>
<FormControl>
<Select v-model="formState.yAxis" :disabled="columns.length === 0">
<Select v-model="formState.yAxis" :disabled="configuration.headers.length === 0">
<SelectTrigger class="w-full">
<SelectValue placeholder="Select"/>
</SelectTrigger>
<SelectContent>
<SelectItem v-for="item in columns" :value="item as string">
<SelectItem v-for="item in configuration.headers" :value="item as string">
{{ item }}
</SelectItem>
</SelectContent>
@ -62,6 +62,8 @@ import { defineComponent } from 'vue'
import { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectTrigger, SelectValue } from '@/components/ui/select'
import { FormControl, FormDescription, FormField, FormItem, FormLabel } from '@/components/ui/form'
import { Slider } from '@/components/ui/slider'
import { Configuration, IChart } from '@/views/components/visual/Configuration.ts'
import { cloneDeep, keys } from 'lodash'
export default defineComponent({
name: 'VisualPieConfigure',
@ -71,9 +73,8 @@ export default defineComponent({
FormDescription, FormControl, FormLabel, FormField, FormItem
},
props: {
columns: {
type: Array,
default: () => []
configuration: {
type: Object as () => Configuration
}
},
watch: {
@ -85,7 +86,16 @@ export default defineComponent({
data()
{
return {
formState: {
formState: null as IChart | null
}
},
created()
{
if (this.configuration && keys(this.configuration.chartConfigure).length > 0) {
this.formState = cloneDeep(this.configuration.chartConfigure) as IChart
}
else {
this.formState = {
xAxis: undefined,
yAxis: undefined,
outerRadius: [0.8]

32
core/datacap-ui/src/views/components/visual/components/VisualWordCloudConfigure.vue
View File

@ -1,5 +1,5 @@
<template>
<div>
<div v-if="configuration && formState" class="space-y-2">
<FormField class="flex items-center" name="xAxis">
<FormItem class="flex-1">
<div class="flex items-center">
@ -7,12 +7,12 @@
{{ $t('dataset.common.visualConfigureCategoryField') }}
</FormLabel>
<FormControl>
<Select v-model="formState.xAxis" :disabled="columns.length === 0">
<Select v-model="formState.xAxis" :disabled="configuration.headers.length === 0">
<SelectTrigger class="w-full">
<SelectValue placeholder="Select"/>
</SelectTrigger>
<SelectContent>
<SelectItem v-for="item in columns" :value="item as string">
<SelectItem v-for="item in configuration.headers" :value="item as string">
{{ item }}
</SelectItem>
</SelectContent>
@ -28,12 +28,12 @@
{{ $t('dataset.common.visualConfigureValueField') }}
</FormLabel>
<FormControl>
<Select v-model="formState.yAxis" :disabled="columns.length === 0">
<Select v-model="formState.yAxis" :disabled="configuration.headers.length === 0">
<SelectTrigger class="w-full">
<SelectValue placeholder="Select"/>
</SelectTrigger>
<SelectContent>
<SelectItem v-for="item in columns" :value="item as string">
<SelectItem v-for="item in configuration.headers" :value="item as string">
{{ item }}
</SelectItem>
</SelectContent>
@ -49,12 +49,12 @@
{{ $t('dataset.common.visualConfigureSeriesField') }}
</FormLabel>
<FormControl>
<Select v-model="formState.series" :disabled="columns.length === 0">
<Select v-model="formState.series" :disabled="configuration.headers.length === 0">
<SelectTrigger class="w-full">
<SelectValue placeholder="Select"/>
</SelectTrigger>
<SelectContent>
<SelectItem v-for="item in columns" :value="item as string">
<SelectItem v-for="item in configuration.headers" :value="item as string">
{{ item }}
</SelectItem>
</SelectContent>
@ -70,6 +70,8 @@
import { defineComponent } from 'vue'
import { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectTrigger, SelectValue } from '@/components/ui/select'
import { FormControl, FormDescription, FormField, FormItem, FormLabel } from '@/components/ui/form'
import { Configuration, IChart } from '@/views/components/visual/Configuration.ts'
import { cloneDeep, keys } from 'lodash'
export default defineComponent({
name: 'VisualWordCloudConfigure',
@ -78,9 +80,8 @@ export default defineComponent({
FormDescription, FormControl, FormLabel, FormField, FormItem
},
props: {
columns: {
type: Array,
default: () => []
configuration: {
type: Object as () => Configuration
}
},
watch: {
@ -92,7 +93,16 @@ export default defineComponent({
data()
{
return {
formState: {
formState: null as IChart | null
}
},
created()
{
if (this.configuration && keys(this.configuration.chartConfigure).length > 0) {
this.formState = cloneDeep(this.configuration.chartConfigure) as IChart
}
else {
this.formState = {
xAxis: undefined,
yAxis: undefined,
series: undefined