Davinci-二次开发：新增辅助图形-装饰图形
文章目录
- Davinci 介绍
- 概述：
- 效果:
- 前端目录结构
- 辅助图形扩展 步骤
- 1.添加辅助图形id
- 2.创建辅助图形组件
- 3.将组件引入到index.ts
- 4.在 LayerCore.tsx 添加辅助图形组件
- 5.完成
- 补充 添加辅助图形选项图标
- Davinci-二次开发：新增辅助图形-边框
Davinci 介绍
Davinci 是宜信出品的DVaaS（数据可视化及服务）的一款BI产品
Davinci 是一个 DVaaS（Data Visualization as a Service）平台解决方案，面向业务人员/数据工程师/数据分析师/数据科学家，致力于提供一站式数据可视化解决方案。既可作为公有云/私有云独立部署使用，也可作为可视化插件集成到三方系统。用户只需在可视化 UI 上简单配置即可服务多种数据可视化应用，并支持高级交互/行业分析/模式探索/社交智能等可视化功能。
概述：
Davinci 的 display功能目前只提供了四种辅助图形，矩形、标签、视频、时间器，边框和标签可以自己上传背景图片。对于没有设计帮助的我，嘿嘿嘿，下面我来说具体思路，本次新增的图形组件均来自dataV:http://datav-react.jiaminghi.com/
安装命令npm install @jiaminghi/data-view-react或cnpm install @jiaminghi/data-view-react或yarn add @jiaminghi/data-view-react 根据自己本身环境选择命令
效果:
前端目录结构
└── webapp
└── app
└── assets (资源文件)
└── json（存放了配置项）
├── slideSettings（辅助图形配置项）
└── containers
└── Display
├── components
├──Layer
| ├── LayerCore.tsx 辅助图形
├── Conetent
| ├── SecondaryGraph //单个辅助图形组件
└── Widget //widget功能所在文件夹
├── component //组件
| ├── Chart（图表驱动）
| ├── Config
| ├── Pivot（透视驱动）
| ├── Widget
| └── Workbench //工作台显示区（图表、数据、样式、配置）
| | ├── ConfigSections //各个图表样式（图例、颜色、标签、xy轴等）配置
| | | ├── SpecSection
| | | └── TableSection
| | └── Dropbox
├── config //初始化配置信息（数据、样式、配置）
| ├── chart（图表驱动）
| └── pivot（透视驱动）
├── render //根据信息最后处理（拼装echarts需要的配置）
| ├── chart（图表驱动）
| └── pivot（透视驱动）
...
辅助图形的配置项存放在/app/assets/json/slideSettings 下
辅助图形扩展 步骤
1.添加辅助图形id
在webapp\app\containers\Display\components\Setting\Form
目录下的constants.ts 添加相关配置
constants.ts 的 SecondaryGraphTypes 添加图形id slideSettings 将图形id和json文件对应
import slide from 'assets/json/slideSettings/slide.json'
import chart from 'assets/json/slideSettings/chart.json'
import rectangle from 'assets/json/slideSettings/rectangle.json'
import label from 'assets/json/slideSettings/label.json'
import video from 'assets/json/slideSettings/video.json'
import timer from 'assets/json/slideSettings/timer.json'
import decoration3 from 'assets/json/slideSettings/decoration3.json'
export enum SecondaryGraphTypes {
Rectangle = 20,
Label = 21,
Video = 22,
Timer = 23,
Decoration = 24
}
export enum GraphTypes {
Slide,
Chart,
Secondary
}
export const slideSettings = {
[GraphTypes.Slide]: slide,
[GraphTypes.Chart]: chart,
[SecondaryGraphTypes.Rectangle]: rectangle,
[SecondaryGraphTypes.Label]: label,
[SecondaryGraphTypes.Video]: video,
[SecondaryGraphTypes.Timer]: timer,
[SecondaryGraphTypes.Decoration]: decoration3,
}
2.创建辅助图形组件
在webapp/app/containers/Display/components/Layer/Content/SecondaryGraph/ 下创建对应组件 注意文件格式为tsx
import { LayerContext } from '../../util'
import React, { useContext, useState, useEffect } from 'react'
import moment from 'moment'
import { useLabelStyle } from './hooks'
import * as datav from '@jiaminghi/data-view-react'
const DevDecoration: React.FC = () => {
//获取参数
const { layer: { params } } = useContext(LayerContext)
const { color, dev_type } = params
const labelStyle = useLabelStyle(params)
if(dev_type == "Decoration1"){
return
}
if(dev_type == "Decoration3"){
return
}
if(dev_type == "Decoration5"){
return {params.contentText}
}
if(dev_type == "Decoration6"){
return {params.contentText}
}
if(dev_type == "Decoration8"){
return
}
if(dev_type == "Decoration9"){
return {params.contentText}
}
if(dev_type == "Decoration10"){
return {params.contentText}
}
}
export default DevDecoration
3.将组件引入到index.ts
在webapp/app/containers/Display/components/Layer/Content/SecondaryGraph/index.ts 下引入组件
export { default as Rectangle } from './Rectangle'
export { default as Label } from './Label'
export { default as Video } from './Video'
export { default as Timer } from './Timer'
export { default as DevDecoration } from './DevDecoration'
4.在 LayerCore.tsx 添加辅助图形组件
import React, { useContext } from 'react'
import { LayerContext } from './util'
import { GraphTypes, SecondaryGraphTypes } from '../Setting'
import { Chart, Rectangle, Label, Video, Timer,DevDecoration,DevBorderBox } from './Content'
const LayerCore: React.FC = (props) => {
const { layer, operationInfo } = useContext(LayerContext)
const { type, subType } = layer
if (type === GraphTypes.Chart) {
return 5.完成
在 dataV 中装饰图形共14中 8种带有动画.
补充 添加辅助图形选项图标
文件目录 webapp\app\containers\Display\components\Toolbar\Chart.tsx
import React, { useContext, useCallback, useMemo } from 'react'
import { Button, Icon, Dropdown, Menu } from 'antd'
const ButtonGroup = Button.Group
import IconFont from 'components/IconFont'
import { DisplayToolbarContext } from './util'
import { GraphTypes, SecondaryGraphTypes } from '../constants'
import { ClickParam } from 'antd/lib/menu'
const SecondaryGraphIcons = [
{
name: '矩形',
icon: 'icon-rounded-rect',
type: SecondaryGraphTypes.Rectangle
},
{
name: '标签',
icon: 'icon-rect-text',
type: SecondaryGraphTypes.Label
},
{
name: '视频',
icon: 'icon-video',
type: SecondaryGraphTypes.Video
},
{
name: '时间器',
icon: 'icon-clock',
type: SecondaryGraphTypes.Timer
},
{
name: '装饰',
icon: 'icon-rounded-rect',
type: SecondaryGraphTypes.Decoration
}
]
interface IChartProps {
onAdd: (type: GraphTypes, subType?: SecondaryGraphTypes) => void
}
const Chart: React.FC = (props) => {
const { size, comment } = useContext(DisplayToolbarContext)
const { onAdd } = props
const addChart = useCallback(() => {
onAdd(GraphTypes.Chart)
}, [onAdd])
//辅助图形里面的item点击事件
const addSecondary = useCallback(
(param: ClickParam) => {
onAdd(GraphTypes.Secondary, +param.key as SecondaryGraphTypes)
},
[onAdd]
)
//添加辅助图形里面的图形
const overlay = (
)
return (
)
}
export default Chart
辅助图形json文件
文件目录 webapp\app\assets\json\slideSettings\decoration3.json
{
"name": "Decoration3",
"title": "装饰3",
"params": [{
"name": "size",
"title": "装饰尺寸",
"items": [{
"name": "width",
"title": "宽度（像素）",
"component": "inputnumber",
"default": 200
}, {
"name": "height",
"title": "高度（像素）",
"component": "inputnumber",
"default": 120
}]
}, {
"name": "position",
"title": "矩形位置",
"items": [{
"name": "positionX",
"title": "x轴位置（像素）",
"component": "inputnumber",
"labelCol": 15,
"wrapperCol": 8
}, {
"name": "positionY",
"title": "y轴位置（像素）",
"component": "inputnumber",
"labelCol": 15,
"wrapperCol": 8
}]
},{
"name": "colors",
"title": "颜色",
"items": [{
"name": "color",
"title": "装饰颜色",
"component": "colorPicker",
"default": [0,0,0],
"labelCol": 10
}]
}, {
"name": "dev_type",
"title": "装饰",
"items": [{
"name": "dev_type",
"title": "装饰样式",
"component": "select",
"values": [{
"name": "第一种",
"value": "Decoration1"
}, {
"name": "第二种",
"value": "Decoration2"
}, {
"name": "第二种(反转)",
"value": "Decoration2(reverse)"
}, {
"name": "第三种",
"value": "Decoration3"
},{
"name": "第四种",
"value": "Decoration4"
}, {
"name": "第四种(反转)",
"value": "Decoration4(reverse)"
}, {
"name": "第五种",
"value": "Decoration5"
}, {
"name": "第六种",
"value": "Decoration6"
}, {
"name": "第七种",
"value": "Decoration7"
}, {
"name": "第八种",
"value": "Decoration8"
}, {
"name": "第八种(反转)",
"value": "Decoration8(reverse)"
}
, {
"name": "第九种",
"value": "Decoration9"
}
, {
"name": "第十种",
"value": "Decoration10"
}
, {
"name": "第十一种",
"value": "Decoration11"
}],
"default": "Decoration6"
}]
}, {
"name": "content",
"title": "文本",
"items": [{
"name": "contentText",
"tip": "输入文本",
"title": "文本内容",
"component": "input",
"default": "",
"wrapperCol": 24
}]
}, {
"name": "font",
"title": "文字",
"items": [{
"name": "fontFamily",
"title": "字体",
"component": "select",
"values": [{
"name": "默认",
"value": ""
}, {
"name": "微软雅黑",
"value": "Microsoft Yahei"
}, {
"name": "宋体",
"value": "SimSun"
}, {
"name": "黑体",
"value": "Heiti"
}, {
"name": "华文细黑",
"value": "STXihei"
}, {
"name": "Verdana",
"value": "Verdana"
}, {
"name": "Arial",
"value": "Arial"
}, {
"name": "Times New Roman",
"value": "Times New Roman"
}, {
"name": "Times",
"value": "Times"
}, {
"name": "MS Sans Serif",
"value": "MS Sans Serif"
}],
"default": "",
"wrapperCol": 24
}, {
"name": "fontColor",
"title": "字体颜色",
"component": "colorPicker",
"default": [0,0,0],
"labelCol": 10,
"wrapperCol": 14
}, {
"name": "fontSize",
"title": "字体大小",
"component": "inputnumber",
"default": 40,
"placeholder": "像素",
"labelCol": 10,
"wrapperCol": 14
},{
"name": "fontWeight",
"title": "字体粗细",
"component": "select",
"values": [{
"name": "normal",
"value": "normal"
}, {
"name": "bold",
"value": "bold"
}, {
"name": "bolder",
"value": "bolder"
}, {
"name": "lighter",
"value": "lighter"
}, {
"name": "100",
"value": "100"
}, {
"name": "200",
"value": "200"
}, {
"name": "300",
"value": "300"
}, {
"name": "400",
"value": "400"
}, {
"name": "500",
"value": "500"
}, {
"name": "600",
"value": "600"
}, {
"name": "700",
"value": "700"
}, {
"name": "800",
"value": "800"
}, {
"name": "900",
"value": "900"
}],
"default": "normal",
"labelCol": 10,
"wrapperCol": 14
}, {
"name": "textStyle",
"title": "样式",
"component": "checkboxGroup",
"values": [{
"label": "斜体",
"value": "italic"
}, {
"label": "下划线",
"value": "underline"
}],
"default": [],
"labelCol": 10,
"wrapperCol": 14
}
]
}]
}
在webapp\app\containers\Display\components\types.ts的ILayerParams接口下 添加属性字段 color、dev_type
color: string[]
dev_type:String