[Core] [Visual] Add rose chart (#757)

This commit is contained in:
qianmoQ 2024-05-09 12:40:44 +08:00 committed by GitHub
commit 05f7436d66
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
10 changed files with 267 additions and 57 deletions

View File

@ -874,6 +874,7 @@ export default {
visualTypeRadar: 'Radar',
visualTypeFunnel: 'Funnel',
visualTypeGauge: 'Gauge',
visualTypeRose: 'Rose',
visualConfigure: 'Visual Configure',
visualConfigureNotSpecified: 'No configuration items are available',
visualConfigureXAxis: 'X Axis',
@ -907,6 +908,8 @@ export default {
visualConfigureTitleGroupAlignLeft: 'Left',
visualConfigureTitleGroupAlignCenter: 'Center',
visualConfigureTitleGroupAlignRight: 'Right',
visualConfigureLabelGroup: 'Label Configure',
visualConfigureLabelGroupVisible: 'Visible',
columnExpressionMax: 'Maximum',
columnExpressionMin: 'Minimum',
columnExpressionSum: 'Sum',

View File

@ -874,6 +874,7 @@ export default {
visualTypeRadar: '雷达图',
visualTypeFunnel: '漏斗图',
visualTypeGauge: '仪表盘图',
visualTypeRose: '玫瑰图',
visualConfigure: '可视化配置',
visualConfigureNotSpecified: '暂无可用配置项',
visualConfigureXAxis: 'X轴',
@ -907,6 +908,8 @@ export default {
visualConfigureTitleGroupAlignLeft: '左对齐',
visualConfigureTitleGroupAlignCenter: '居中对齐',
visualConfigureTitleGroupAlignRight: '右对齐',
visualConfigureLabelGroup: '标签配置',
visualConfigureLabelGroupVisible: '是否展示',
columnExpressionMax: '最大值',
columnExpressionMin: '最小值',
columnExpressionSum: '总和',

View File

@ -33,12 +33,13 @@ export interface IChart
invalidType?: string
showLegend?: boolean
startAngle?: number[]
endAngle?: number[],
endAngle?: number[]
titleVisible?: boolean
titleText?: string
titleSubText?: string
titlePosition?: string
titleAlign?: string
labelVisible?: boolean
}
export interface ChartFieldGroup

View File

@ -11,4 +11,5 @@ export enum Type
RADAR = ('RADAR'),
FUNNEL = ('FUNNEL'),
GAUGE = ('GAUGE'),
ROSE = ('ROSE')
}

View File

@ -75,6 +75,8 @@ const createdConfigure = (type: Type, i18n: any): Array<ChartFieldGroup> => {
disabled: { field: 'titleVisible', value: false }
}
const labelVisible: ChartField = { label: i18n.t('dataset.common.visualConfigureLabelGroupVisible'), field: 'labelVisible', type: 'SWITCH', value: false }
if (type === Type.LINE) {
const fields: Array<ChartField> = [categoryField, valueField, seriesField, dataBreakpoint]
const generalField: ChartFieldGroup = { label: i18n.t('dataset.common.visualConfigureGeneralGroup'), fields: fields }
@ -115,6 +117,16 @@ const createdConfigure = (type: Type, i18n: any): Array<ChartFieldGroup> => {
const generalField: ChartFieldGroup = { label: i18n.t('dataset.common.visualConfigureGeneralGroup'), fields: fields }
fieldGroups.push(generalField)
}
else if (type === Type.ROSE) {
const fields: Array<ChartField> = [outerRadius, innerRadius, categoryField, valueField, seriesField]
const generalField: ChartFieldGroup = { label: i18n.t('dataset.common.visualConfigureGeneralGroup'), fields: fields }
const labelGroup: ChartFieldGroup = {
label: i18n.t('dataset.common.visualConfigureLabelGroup'),
fields: [labelVisible]
}
fieldGroups.push(generalField, labelGroup)
}
return fieldGroups
}

View File

@ -17,6 +17,7 @@
<VisualRadar v-else-if="configuration?.type === Type.RADAR" :configuration="configuration" @change="handlerCommit"/>
<VisualFunnel v-else-if="configuration?.type === Type.FUNNEL" :configuration="configuration" @change="handlerCommit"/>
<VisualGauge v-else-if="configuration?.type === Type.GAUGE" :configuration="configuration" @change="handlerCommit"/>
<VisualRose v-else-if="configuration?.type === Type.ROSE" :configuration="configuration" @change="handlerCommit"/>
</div>
</div>
</div>
@ -162,6 +163,24 @@
</svg>
</Tooltip>
</ToggleGroupItem>
<ToggleGroupItem :disabled="configuration.headers.length === 0" :value="Type.ROSE">
<Tooltip :content="$t('dataset.common.visualTypeRose')">
<svg width="23" height="19" viewBox="0 0 23 19" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M14.2891 4.34061C12.6163 4.34061 11.1033 5.02518 10.0152 6.12945M9.28906 13.6584C10.364 15.2751 12.2021 16.3406 14.2891 16.3406C14.623 16.3406 14.9507 16.3133 15.2698 16.2608M19.9477 12.3406C20.1688 11.715 20.2891 11.0419 20.2891 10.3406C20.2891 9.29406 20.0211 8.3101 19.5501 7.45357"
stroke="#21252C" stroke-width="1.6"></path>
<path
d="M21.1403 5.56187C20.0934 2.84561 17.0299 1.28508 14.2419 2.112C14.1199 2.1482 14.0412 2.265 14.0476 2.39211L14.4231 9.83589C14.4343 10.0576 14.6835 10.182 14.8674 10.0576L21.0342 5.8887C21.1407 5.81671 21.1865 5.68182 21.1403 5.56187Z"
stroke="#21252C" stroke-width="1.6"></path>
<path
d="M15.5303 18.0445C18.321 18.3698 20.8099 16.1368 21.3718 13.3596C21.3983 13.2288 21.3249 13.0997 21.2012 13.0499L14.9075 10.5185C14.7075 10.4381 14.4941 10.6001 14.5179 10.8143L15.2918 17.7994C15.3059 17.9266 15.4033 18.0297 15.5303 18.0445Z"
stroke="#21252C" stroke-width="1.6"></path>
<path
d="M6.11156 3.00092C2.12443 6.01236 1.38079 11.9577 4.17682 16.11C4.25866 16.2316 4.42097 16.267 4.54805 16.194L14.0167 10.759C14.1817 10.6643 14.2094 10.4377 14.072 10.3061L6.47293 3.02416C6.37404 2.92939 6.22086 2.91837 6.11156 3.00092Z"
stroke="#21252C" stroke-width="1.6"></path>
</svg>
</Tooltip>
</ToggleGroupItem>
</div>
</ToggleGroup>
</div>
@ -205,10 +224,12 @@ import VisualGauge from '@/views/components/visual/components/VisualGauge.vue'
import Button from '@/views/ui/button'
import { createdConfigure } from '@/views/components/visual/Utils.ts'
import { useI18n } from 'vue-i18n'
import VisualRose from '@/views/components/visual/components/VisualRose.vue'
export default defineComponent({
name: 'VisualEditor',
components: {
VisualRose,
VisualGauge, VisualFunnel, VisualRadar, VisualConfigure, VisualScatter,
Card,
Tooltip,

View File

@ -15,9 +15,11 @@
<VisualRadar v-else-if="configuration?.type === Type.RADAR" :configuration="localConfiguration" :submitted="false" :width="width" :height="height"/>
<VisualFunnel v-else-if="configuration?.type === Type.FUNNEL" :configuration="localConfiguration" :submitted="false" :width="width" :height="height"/>
<VisualGauge v-else-if="configuration?.type === Type.GAUGE" :configuration="localConfiguration" :submitted="false" :width="width" :height="height"/>
<VisualRose v-else-if="configuration?.type === Type.ROSE" :configuration="localConfiguration" :submitted="false" :width="width" :height="height"/>
</div>
</div>
</template>
<script lang="ts">
import { cloneDeep } from 'lodash'
import { Type } from '@/views/components/visual/Type'
@ -37,6 +39,7 @@ import VisualRadar from '@/views/components/visual/components/VisualRadar.vue'
import VisualScatter from '@/views/components/visual/components/VisualScatter.vue'
import VisualFunnel from '@/views/components/visual/components/VisualFunnel.vue'
import VisualGauge from '@/views/components/visual/components/VisualGauge.vue'
import VisualRose from '@/views/components/visual/components/VisualRose.vue'
export default defineComponent({
name: 'VisualView',
@ -47,6 +50,7 @@ export default defineComponent({
}
},
components: {
VisualRose,
VisualGauge,
VisualFunnel,
VisualScatter,

View File

@ -0,0 +1,85 @@
<template>
<div ref="content" :style="{width: width, height: height}"/>
</template>
<script lang="ts">
import VChart from '@visactor/vchart'
import { cloneDeep, head } from 'lodash'
import { Configuration } from '../Configuration'
import { defineComponent } from 'vue'
let instance: VChart
export default defineComponent({
name: 'VisualRose',
props: {
configuration: {
type: Object as () => Configuration
},
submitted: {
type: Boolean,
default: true
},
width: {
type: String,
default: () => '100%'
},
height: {
type: String,
default: () => '400px'
}
},
watch: {
configuration: {
handler: 'handlerReset',
deep: true
}
},
created()
{
this.handlerInitialize(false)
},
methods: {
handlerInitialize(reset: boolean)
{
setTimeout(() => {
try {
if (this.configuration) {
const options = {
type: 'rose',
data: [{ values: this.configuration.columns }],
outerRadius: head(this.configuration.chartConfigure?.outerRadius),
innerRadius: head(this.configuration.chartConfigure?.innerRadius),
categoryField: this.configuration.chartConfigure?.xAxis,
valueField: this.configuration.chartConfigure?.yAxis,
seriesField: this.configuration.chartConfigure?.series,
label: {
visible: this.configuration.chartConfigure?.labelVisible
}
} as any
if (!reset) {
instance = new VChart(options, { dom: this.$refs.content as HTMLElement })
instance.renderAsync()
}
else {
instance.updateSpec(options, true)
}
if (this.submitted) {
const cloneOptions = cloneDeep(this.configuration)
cloneOptions.headers = []
cloneOptions.columns = []
this.$emit('change', cloneOptions)
}
}
}
catch (e) {
console.warn(e)
}
})
},
handlerReset()
{
this.handlerInitialize(true)
}
}
})
</script>

View File

@ -4,7 +4,7 @@ title: Deploying in Self Host
DataCap enables users to deploy services to their own machines. This document allows users to learn how to deploy DataCap in an autonomous machine.
#### System Requirements
### System Requirements
---
@ -19,7 +19,7 @@ DataCap enables users to deploy services to their own machines. This document al
| JDK | `>=11` (We recommend it for: `1.8` \| `11`) |
| MySQL | `>=5.6.x` |
#### Prepare the installation package
### Prepare the installation package
---
@ -38,7 +38,7 @@ tar -xvzf datacap-release.tar.gz
cd datacap
```
#### Software configuration
### Software configuration
---
@ -50,7 +50,7 @@ For the first installation of the software, you need to import the sql script fr
All configurations in the DataCap software are in the `configure/application.properties` file.
##### Basic configuration
#### Basic configuration
After importing the `SQL` script, modify the `configure/application.properties` configuration file to modify the configuration information of the MySQL server
@ -75,7 +75,7 @@ datacap.editor.sugs.maxSize=1000
- `datacap.security.expiration`: The expiration time for configuring data security management
- `datacap.editor.sugs.maxSize`: Lets you configure the maximum number of rows in the data editor
##### Web service configuration
#### Web service configuration
```properties
spring.mvc.throw-exception-if-no-handler-found=true
@ -87,7 +87,7 @@ spring.web.resources.add-mappings=true
- `spring.resources.add-mappings`: Lets you configure whether to enable static resource mapping
- `spring.web.resources.add-mappings`: Lets you configure whether to enable static resource mapping
##### Database configuration
#### Database configuration
!!! danger
@ -107,7 +107,7 @@ spring.datasource.password=12345678
All Spring Data configuration parameters are supported
##### Actuator configuration
#### Actuator configuration
```properties
datacap.executor.data=
@ -121,7 +121,7 @@ datacap.executor.seatunnel.home=/opt/lib/seatunnel
- `datacap.executor.mode`: It is used to configure the execution mode of the actuator, different actuators have different execution modes
- `datacap.executor.seatunnel.home`: The Apache Seatunnel home directory used to configure the executor
##### Upload the configuration
#### Upload the configuration
```properties
datacap.config.data=
@ -131,7 +131,7 @@ datacap.cache.data=
- `datacap.config.data`: The path used to configure the upload profile
- `datacap.cache.data`: Lets you configure the path to upload the cache file
##### OpenAi configuration
#### OpenAi configuration
```properties
datacap.openai.backend=https://api.openai.com
@ -145,7 +145,7 @@ datacap.openai.timeout=30
- `datacap.openai.model`: The model used to configure OpenAI
- `datacap.openai.timeout`: Used to configure the timeout period for OpenAI
##### Primary system configuration
#### Primary system configuration
```properties
datacap.registration.enable=
@ -161,7 +161,7 @@ datacap.audit.sql.print=false
- `datacap.cache.expiration`: Lets you configure the cache expiration time
- `datacap.audit.sql.print`: This parameter is used to configure whether to print SQL statements
##### Pipeline configuration
#### Pipeline configuration
```properties
datacap.pipeline.maxRunning=100
@ -173,45 +173,85 @@ datacap.pipeline.reset=STOPPED
- `datacap.pipeline.maxQueue`: Used to configure the maximum queue
- `datacap.pipeline.reset`: Lets you configure a reset policy
##### Experimental features
#### Storage configuration
---
Storage currently supports
- `Local`: local storage
- `AliOss`: Alibaba Cloud OSS
- `Qiniu`: Qiniu Cloud
##### Local storage configuration
```properties
datacap.fs.type=Local
datacap.fs.access=
datacap.fs.secret=
datacap.fs.endpoint=
datacap.fs.bucket=
```
- `datacap.fs.type`: used to configure the file system type
- `datacap.fs.access`: used to configure file system access, this type can be empty
- `datacap.fs.secret`: used to configure the file system key, this type can be empty
- `datacap.fs.endpoint`: used to configure the file system endpoint. If filled in, it will be appended as a directory **This type can be empty**
- `datacap.fs.bucket`: used to configure the file system bucket, this type can be empty
##### Alibaba Cloud OSS configuration
```properties
datacap.fs.type=AliOss
datacap.fs.access=
datacap.fs.secret=
datacap.fs.endpoint=
datacap.fs.bucket=
```
- `datacap.fs.type`: AliOss
##### Qiniu Cloud Configuration
```properties
datacap.fs.type=Qiniu
datacap.fs.access=
datacap.fs.secret=
datacap.fs.endpoint=
datacap.fs.bucket=
```
- `datacap.fs.type`: Qiniu
#### Experimental features
```properties
datacap.experimental.autoLimit=true
datacap.experimental.data={user.dir}/data
datacap.experimental.avatarPath={username}/avatar/
datacap.experimental.fs.type=Local
datacap.experimental.fs.access=
datacap.experimental.fs.secret=
datacap.experimental.fs.endpoint=
datacap.experimental.fs.bucket=
```
- `datacap.experimental.autoLimit`: This parameter specifies whether to automatically increase the LIMIT
- `datacap.experimental.data`: The data path used to configure the experimental feature
- `datacap.experimental.avatarPath`: Avatar path to configure experimental features
- `datacap.experimental.fs.type`: The type of file system used to configure experimental features
- `datacap.experimental.fs.access`: File system access for configuring experimental features
- `datacap.experimental.fs.secret`: The file system key used to configure the experimental feature
- `datacap.experimental.fs.endpoint`: A file system endpoint for configuring experimental functionality
- `datacap.experimental.fs.bucket`: A file system bucket to configure experimental features
##### Log configuration
#### Log configuration
!!! warning
If you need to modify the log configuration, you can simply modify the `configure/logback.xml` configuration file
##### JVM configuration
#### JVM configuration
!!! warning
If you need to customize the JVM configuration, you can simply modify the `configure/jvm.conf` configuration file
#### Software startup
### Software startup
---
##### Start the service
#### Start the service
DataCap service startup is very simple, execute the following script
@ -219,7 +259,7 @@ DataCap service startup is very simple, execute the following script
./bin/startup.sh
```
##### Discontinuation of service
#### Discontinuation of service
Stop the service and execute the following script
@ -227,7 +267,7 @@ Stop the service and execute the following script
./bin/shutdown.sh
```
##### Debug the service
#### Debug the service
!!! note

View File

@ -4,7 +4,7 @@ title: 自主机部署
DataCap 是支持用户将服务部署到自主机中。通过本文档用户可以了解如何在自主机中部署 DataCap。
#### 系统要求
### 系统要求
---
@ -19,7 +19,7 @@ DataCap 是支持用户将服务部署到自主机中。通过本文档用户可
| JDK | `>=11` (我们建议为 `1.8` \| `11`) |
| MySQL | `>=5.6.x` |
#### 准备安装包
### 准备安装包
---
@ -38,7 +38,7 @@ tar -xvzf datacap-release.tar.gz
cd datacap
```
#### 软件配置
### 软件配置
---
@ -50,7 +50,7 @@ cd datacap
datacap 软件中的所有配置均在 `configure/application.properties` 文件中。
##### 基本配置
#### 基本配置
导入 `SQL` 脚本后,修改 `configure/application.properties` 配置文件以修改MySQL服务器的配置信息
@ -75,7 +75,7 @@ datacap.editor.sugs.maxSize=1000
- `datacap.security.expiration`: 用于配置数据安全管理的过期时间
- `datacap.editor.sugs.maxSize`: 用于配置数据编辑器的最大行数
##### Web 服务配置
#### Web 服务配置
```properties
spring.mvc.throw-exception-if-no-handler-found=true
@ -87,7 +87,7 @@ spring.web.resources.add-mappings=true
- `spring.resources.add-mappings`: 用于配置是否启用静态资源映射
- `spring.web.resources.add-mappings`: 用于配置是否启用静态资源映射
##### 数据库配置
#### 数据库配置
!!! danger
@ -107,7 +107,7 @@ spring.datasource.password=12345678
支持所有 Spring Data 的配置参数
##### 执行器配置
#### 执行器配置
```properties
datacap.executor.data=
@ -121,7 +121,7 @@ datacap.executor.seatunnel.home=/opt/lib/seatunnel
- `datacap.executor.mode`: 用于配置执行器的执行模式,不同的执行器拥有不同的执行模式
- `datacap.executor.seatunnel.home`: 用于配置执行器的 Apache Seatunnel 主目录
##### 上传配置
#### 上传配置
```properties
datacap.config.data=
@ -131,7 +131,7 @@ datacap.cache.data=
- `datacap.config.data`: 用于配置上传配置文件的路径
- `datacap.cache.data`: 用于配置上传缓存文件的路径
##### OpenAi 配置
#### OpenAi 配置
```properties
datacap.openai.backend=https://api.openai.com
@ -145,7 +145,7 @@ datacap.openai.timeout=30
- `datacap.openai.model`: 用于配置 OpenAI 的模型
- `datacap.openai.timeout`: 用于配置 OpenAI 的超时时间
##### 主系统配置
#### 主系统配置
```properties
datacap.registration.enable=
@ -161,7 +161,7 @@ datacap.audit.sql.print=false
- `datacap.cache.expiration`: 用于配置缓存过期时间
- `datacap.audit.sql.print`: 用于配置是否打印 SQL
##### 流水线配置
#### 流水线配置
```properties
datacap.pipeline.maxRunning=100
@ -173,45 +173,85 @@ datacap.pipeline.reset=STOPPED
- `datacap.pipeline.maxQueue`: 用于配置最大队列
- `datacap.pipeline.reset`: 用于配置重置策略
##### 实验性功能
#### 存储配置
---
存储目前支持
- `Local`: 本地存储
- `AliOss`: 阿里云 OSS
- `Qiniu`: 七牛云
##### 本地存储配置
```properties
datacap.fs.type=Local
datacap.fs.access=
datacap.fs.secret=
datacap.fs.endpoint=
datacap.fs.bucket=
```
- `datacap.fs.type`: 用于配置文件系统类型
- `datacap.fs.access`: 用于配置文件系统访问,该类型可以为空
- `datacap.fs.secret`: 用于配置文件系统密钥,该类型可以为空
- `datacap.fs.endpoint`: 用于配置文件系统端点,如果填写后将追加为目录 **该类型可以为空**
- `datacap.fs.bucket`: 用于配置文件系统存储桶,该类型可以为空
##### 阿里云 OSS 配置
```properties
datacap.fs.type=AliOss
datacap.fs.access=
datacap.fs.secret=
datacap.fs.endpoint=
datacap.fs.bucket=
```
- `datacap.fs.type`: AliOss
##### 七牛云配置
```properties
datacap.fs.type=Qiniu
datacap.fs.access=
datacap.fs.secret=
datacap.fs.endpoint=
datacap.fs.bucket=
```
- `datacap.fs.type`: Qiniu
#### 实验性功能
```properties
datacap.experimental.autoLimit=true
datacap.experimental.data={user.dir}/data
datacap.experimental.avatarPath={username}/avatar/
datacap.experimental.fs.type=Local
datacap.experimental.fs.access=
datacap.experimental.fs.secret=
datacap.experimental.fs.endpoint=
datacap.experimental.fs.bucket=
```
- `datacap.experimental.autoLimit`: 用于配置是否自动增加 LIMIT
- `datacap.experimental.data`: 用于配置实验性功能的数据路径
- `datacap.experimental.avatarPath`: 用于配置实验性功能的头像路径
- `datacap.experimental.fs.type`: 用于配置实验性功能的文件系统类型
- `datacap.experimental.fs.access`: 用于配置实验性功能的文件系统访问
- `datacap.experimental.fs.secret`: 用于配置实验性功能的文件系统密钥
- `datacap.experimental.fs.endpoint`: 用于配置实验性功能的文件系统端点
- `datacap.experimental.fs.bucket`: 用于配置实验性功能的文件系统存储桶
##### 日志配置
#### 日志配置
!!! warning
如果需要修改日志配置,只需修改 `configure/logback.xml` 配置文件即可
##### JVM 配置
#### JVM 配置
!!! warning
如果您需要定制化 JVM 配置,只需修改 `configure/jvm.conf` 配置文件即可
#### 软件启动
### 软件启动
---
##### 启动服务
#### 启动服务
DataCap服务启动非常简单执行以下脚本
@ -219,7 +259,7 @@ DataCap服务启动非常简单执行以下脚本
./bin/startup.sh
```
##### 停止服务
#### 停止服务
停止服务并执行以下脚本
@ -227,7 +267,7 @@ DataCap服务启动非常简单执行以下脚本
./bin/shutdown.sh
```
##### 调试服务
#### 调试服务
!!! note