center/dataease-dm
center/dataease-dm
13
0
Fork 0
forked from github/dataease
Code Pull Requests Activity

Merge pull request #11516 from dataease/pr@dev-v2@feat_border-re

Browse Source 
feat(仪表板、数据大屏): 支持传统边框
This commit is contained in:
王嘉豪 2024-08-13 14:47:18 +08:00 committed by GitHub
commit 5c771e2cf2
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
32 changed files with 183 additions and 110 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
core/core-frontend/src/components/data-visualization/canvas/CanvasCore.vue
View File

@ -202,6 +202,18 @@ const height = ref(0)
const isShowArea = ref(false)
const svgFilterAttrs = ['width', 'height', 'top', 'left', 'rotate', 'backgroundColor']
const commonFilterAttrs = ['width', 'height', 'top', 'left', 'rotate']
const commonFilterAttrsFilterBorder = [
'width',
'height',
'top',
'left',
'rotate',
'borderActive',
'borderWidth',
'borderRadius',
'borderStyle',
'borderColor'
]
const userViewEnlargeRef = ref(null)
const customDatasetParamsRef = ref(null)
const linkJumpRef = ref(null)
@ -515,7 +527,7 @@ const handleContextMenu = e => {
}
const getComponentStyle = style => {
return getStyle(style, commonFilterAttrs)
return getStyle(style, style.borderActive ? commonFilterAttrs : commonFilterAttrsFilterBorder)
}
const getSvgComponentStyle = style => {

6
core/core-frontend/src/custom-component/common/CommonAttr.vue
View File

@ -97,7 +97,7 @@ const colorPickerWidth = computed(() => {
})
const borderSettingShow = computed(() => {
return !!element.value.style['borderActive']
return !!element.value.style['borderStyle']
})
// 暂时关闭
@ -186,14 +186,14 @@ const stopEvent = e => {
</el-collapse-item>
<collapse-switch-item
v-if="element && borderSettingShow"
v-model="element.value.style.borderActive"
v-model="element.style.borderActive"
:themes="themes"
title="边框"
name="borderSetting"
class="common-style-area"
>
<common-border-setting
:element="element"
:style-info="element.style"
:themes="themes"
@onStyleAttrChange="onStyleAttrChange"
></common-border-setting>

137
core/core-frontend/src/custom-component/common/CommonBorderSetting.vue
View File

@ -13,14 +13,14 @@ const { canvasStyleData } = storeToRefs(dvMainStore)
const props = withDefaults(
defineProps<{
themes?: EditorTheme
element: any
styleInfo: any
}>(),
{
themes: 'dark'
}
)
const emits = defineEmits(['onStyleAttrChange'])
const { themes, element } = toRefs(props)
const { themes, styleInfo } = toRefs(props)
const state = reactive({
fontSize: [],
isSetting: false,
@ -38,16 +38,16 @@ const borderStyleList = [
]
const styleInit = () => {
if (element.value) {
if (styleInfo.value) {
Object.keys(styleMounted.value).forEach(key => {
styleMounted.value[key] = Math.round(
(element.value.style[key] * 100) / canvasStyleData.value.scale
(styleInfo.value[key] * 100) / canvasStyleData.value.scale
)
})
}
}
const styleForm = computed<any>(() => element.value.style)
const styleForm = computed<any>(() => styleInfo.value)
const changeStyle = params => {
snapshotStore.recordSnapshotCache()
@ -55,18 +55,16 @@ const changeStyle = params => {
}
const changeStylePre = key => {
changeStyle({ key: key, value: element.value.style[key] })
changeStyle({ key: key, value: styleInfo.value[key] })
}
const sizeChange = key => {
element.value.style[key] = Math.round(
(styleMounted.value[key] * canvasStyleData.value.scale) / 100
)
changeStyle({ key: key, value: element.value.style[key] })
styleInfo.value[key] = (styleMounted.value[key] * canvasStyleData.value.scale) / 100
changeStyle({ key: key, value: styleInfo.value[key] })
}
watch(
() => element.value,
() => styleInfo.value,
() => {
styleInit()
},
@ -80,52 +78,85 @@ watch(
<template>
<el-row class="custom-row">
<el-form label-position="top">
<el-form-item label="颜色" class="form-item" :class="'form-item-' + themes">
<el-color-picker
title="颜色"
v-model="styleForm.borderColor"
class="color-picker-style"
:triggerWidth="50"
is-custom
:predefine="state.predefineColors"
@change="changeStylePre('borderColor')"
<el-row style="display: flex">
<el-form-item
style="width: 70px"
label="颜色"
class="form-item"
:class="'form-item-' + themes"
>
</el-color-picker>
</el-form-item>
<el-form-item label="圆角" class="form-item" :class="'form-item-' + themes">
<el-input-number
title="圆角"
v-model="styleForm.borderRadio"
class="color-picker-style"
@change="sizeChange('borderWidth')"
<el-color-picker
title="颜色"
v-model="styleForm.borderColor"
class="color-picker-style"
:triggerWidth="65"
is-custom
:predefine="state.predefineColors"
@change="changeStylePre('borderColor')"
>
</el-color-picker>
</el-form-item>
<el-form-item
style="width: 150px"
label="圆角"
class="form-item"
:class="'form-item-' + themes"
>
</el-input-number>
</el-form-item>
<el-form-item label="样式" class="form-item" :class="'form-item-' + themes">
<el-select
:effect="themes"
v-model="styleForm.borderStyle"
size="small"
@change="changeStylePre('borderStyle')"
<el-input-number
title="圆角"
:effect="themes"
:min="0"
:max="200"
controls-position="right"
v-model="styleMounted.borderRadius"
class="color-picker-style"
@change="sizeChange('borderRadius')"
>
</el-input-number>
</el-form-item>
</el-row>
<el-row style="display: flex">
<el-form-item
style="width: 70px"
label="样式"
class="form-item"
:class="'form-item-' + themes"
>
<el-option
class="custom-style-option"
v-for="option in borderStyleList"
:key="option.value"
:label="option.name"
:value="option.value"
/>
</el-select>
</el-form-item>
<el-form-item label="线宽" class="form-item" :class="'form-item-' + themes">
<el-input-number
title="线宽"
v-model="styleForm.borderWidth"
class="color-picker-style"
@change="sizeChange('borderWidth')"
<el-select
:effect="themes"
v-model="styleForm.borderStyle"
size="small"
style="width: 65px"
@change="changeStylePre('borderStyle')"
>
<el-option
class="custom-style-option"
v-for="option in borderStyleList"
:key="option.value"
:label="option.name"
:value="option.value"
/>
</el-select>
</el-form-item>
<el-form-item
style="width: 150px"
label="线宽"
class="form-item"
:class="'form-item-' + themes"
>
</el-input-number>
</el-form-item>
<el-input-number
title="线宽"
:min="0"
:max="50"
:effect="themes"
controls-position="right"
v-model="styleMounted.borderWidth"
class="color-picker-style"
@change="sizeChange('borderWidth')"
>
</el-input-number>
</el-form-item>
</el-row>
</el-form>
</el-row>
</template>

50
core/core-frontend/src/custom-component/common/CommonStyleSet.vue
View File

@ -350,7 +350,6 @@ const state = reactive({
const styleColorKeyArray = [
{ value: 'color', label: '颜色', width: 90, icon: 'dv-style-color' },
{ value: 'borderColor', label: '边框颜色', width: 90, icon: 'dv-style-borderColor' },
{
value: 'headFontColor',
label: '头部字体颜色',
@ -388,34 +387,6 @@ const fontSizeList = computed(() => {
return arr
})
const borderWidthList = computed(() => {
const arr = []
for (let i = 0; i <= 20; i = i + 1) {
arr.push({
name: i + '',
value: i
})
}
return arr
})
const borderRadiusList = computed(() => {
const arr = []
for (let i = 0; i <= 50; i = i + 1) {
arr.push({
name: i + '',
value: i
})
}
return arr
})
const borderStyleList = [
{ name: '实线', value: 'solid' },
{ name: '虚线', value: 'dashed' },
{ name: '点线', value: 'dotted' }
]
const styleOptionKeyArrayPre = [
{
value: 'fontFamily',
@ -466,27 +437,6 @@ const styleOptionKeyArray = [
customOption: opacitySizeList,
width: '90px',
icon: 'dv-style-opacity'
},
{
value: 'borderWidth',
label: '边框宽度',
customOption: borderWidthList.value,
width: '90px',
icon: 'dv-style-borderSize'
},
{
value: 'borderRadius',
label: '圆角',
customOption: borderRadiusList.value,
width: '90px',
icon: 'dv-style-borderRadius'
},
{
value: 'borderStyle',
label: '边框样式',
customOption: borderStyleList,
width: '90px',
icon: 'dv-style-borderStyle'
}
]

1
core/core-frontend/src/models/chart/editor.d.ts vendored
View File

@ -1,5 +1,6 @@
declare type EditorProperty =
| 'background-overall-component'
| 'border-style'
| 'basic-style-selector'
| 'dual-basic-style-selector'
| 'label-selector'

35
core/core-frontend/src/views/chart/components/editor/editor-style/ChartStyle.vue
View File

@ -27,6 +27,7 @@ import QuadrantSelector from '@/views/chart/components/editor/editor-style/compo
import FlowMapLineSelector from '@/views/chart/components/editor/editor-style/components/FlowMapLineSelector.vue'
import FlowMapPointSelector from '@/views/chart/components/editor/editor-style/components/FlowMapPointSelector.vue'
import CommonEvent from '@/custom-component/common/CommonEvent.vue'
import CommonBorderSetting from '@/custom-component/common/CommonBorderSetting.vue'
const dvMainStore = dvMainStoreWithOut()
const { dvInfo, batchOptStatus } = storeToRefs(dvMainStore)
@ -43,6 +44,10 @@ const props = defineProps({
type: Object,
required: false
},
commonBorderPop: {
type: Object,
required: false
},
eventInfo: {
type: Object,
required: false
@ -90,8 +95,15 @@ const props = defineProps({
}
})
const { chart, themes, properties, propertyInnerAll, commonBackgroundPop, selectorSpec } =
toRefs(props)
const {
chart,
themes,
properties,
propertyInnerAll,
commonBackgroundPop,
commonBorderPop,
selectorSpec
} = toRefs(props)
const emit = defineEmits([
'onColorChange',
'onMiscChange',
@ -104,6 +116,7 @@ const emit = defineEmits([
'onLegendChange',
'onBasicStyleChange',
'onBackgroundChange',
'onStyleAttrChange',
'onTableHeaderChange',
'onTableCellChange',
'onTableTotalChange',
@ -192,6 +205,10 @@ const onBackgroundChange = (val, prop) => {
state.initReady && emit('onBackgroundChange', val, prop)
}
const onStyleAttrChange = ({ key, value }) => {
state.initReady && emit('onStyleAttrChange', { custom: 'style', property: key, value: value })
}
const onTableHeaderChange = (val, prop) => {
emit('onTableHeaderChange', val, prop)
}
@ -318,6 +335,20 @@ watch(
component-position="component"
/>
</el-collapse-item>
<collapse-switch-item
v-if="showProperties('border-style') && commonBorderPop"
v-model="commonBorderPop.borderActive"
:themes="themes"
title="边框"
name="borderSetting"
class="common-style-area"
>
<common-border-setting
:style-info="commonBorderPop"
:themes="themes"
@onStyleAttrChange="onStyleAttrChange"
></common-border-setting>
</collapse-switch-item>
<el-collapse-item :effect="themes" name="events" title="事件" v-if="eventsShow">
<common-event :themes="themes" :events-info="eventInfo"></common-event>
</el-collapse-item>

6
core/core-frontend/src/views/chart/components/editor/index.vue
View File

@ -1053,6 +1053,10 @@ const onBackgroundChange = val => {
curComponent.value.commonBackground = val
}
const onStyleAttrChange = val => {
curComponent.value.style[val.property] = val.value
}
const onAssistLineChange = val => {
view.value.senior.assistLineCfg = val.data
if (val.requestData) {
@ -2776,6 +2780,7 @@ const deleteChartFieldItem = id => {
:property-inner-all="chartViewInstance.propertyInner"
:selector-spec="chartViewInstance.selectorSpec"
:common-background-pop="curComponent?.commonBackground"
:common-border-pop="curComponent?.style"
:event-info="curComponent?.events"
:chart="view"
:themes="themes"
@ -2794,6 +2799,7 @@ const deleteChartFieldItem = id => {
@onIndicatorNameChange="onIndicatorNameChange"
@onLegendChange="onLegendChange"
@onBackgroundChange="onBackgroundChange"
@onStyleAttrChange="onStyleAttrChange"
@onBasicStyleChange="onBasicStyleChange"
@onTableHeaderChange="onTableHeaderChange"
@onTableCellChange="onTableCellChange"

2
core/core-frontend/src/views/chart/components/js/panel/charts/bar/bidirectional-bar.ts
View File

@ -49,6 +49,7 @@ export class BidirectionalHorizontalBar extends G2PlotChartView<
axis: AxisType[] = ['xAxis', 'yAxis', 'yAxisExt', 'filter', 'drill', 'extLabel', 'extTooltip']
properties: EditorProperty[] = [
'background-overall-component',
'border-style',
'basic-style-selector',
'x-axis-selector',
'dual-y-axis-selector',
@ -62,6 +63,7 @@ export class BidirectionalHorizontalBar extends G2PlotChartView<
]
propertyInner = {
'background-overall-component': ['all'],
'border-style': ['all'],
'basic-style-selector': ['colors', 'alpha', 'gradient', 'layout'],
'x-axis-selector': ['position', 'axisLabel', 'axisLine', 'splitLine'],
'y-axis-selector': [

3
core/core-frontend/src/views/chart/components/js/panel/charts/bar/common.ts
View File

@ -1,5 +1,6 @@
export const BAR_EDITOR_PROPERTY: EditorProperty[] = [
'background-overall-component',
'border-style',
'basic-style-selector',
'label-selector',
'tooltip-selector',
@ -14,6 +15,7 @@ export const BAR_EDITOR_PROPERTY: EditorProperty[] = [
]
export const BAR_RANGE_EDITOR_PROPERTY: EditorProperty[] = [
'background-overall-component',
'border-style',
'basic-style-selector',
'label-selector',
'tooltip-selector',
@ -28,6 +30,7 @@ export const BAR_RANGE_EDITOR_PROPERTY: EditorProperty[] = [
export const BAR_EDITOR_PROPERTY_INNER: EditorPropertyInner = {
'background-overall-component': ['all'],
'border-style': ['all'],
'basic-style-selector': ['colors', 'alpha', 'gradient', 'radiusColumnBar'],
'label-selector': ['fontSize', 'color', 'labelFormatter'],
'tooltip-selector': ['fontSize', 'color', 'tooltipFormatter', 'show'],

2
core/core-frontend/src/views/chart/components/js/panel/charts/bar/progress-bar.ts
View File

@ -34,6 +34,7 @@ export class ProgressBar extends G2PlotChartView<BarOptions, G2Progress> {
}
properties: EditorProperty[] = [
'background-overall-component',
'border-style',
'basic-style-selector',
'label-selector',
'tooltip-selector',
@ -47,6 +48,7 @@ export class ProgressBar extends G2PlotChartView<BarOptions, G2Progress> {
...BAR_EDITOR_PROPERTY_INNER,
'legend-selector': null,
'background-overall-component': ['all'],
'border-style': ['all'],
'basic-style-selector': ['colors', 'alpha', 'gradient'],
'label-selector': ['hPosition', 'color', 'fontSize'],
'tooltip-selector': ['fontSize', 'color', 'backgroundColor', 'tooltipFormatter', 'show'],

2
core/core-frontend/src/views/chart/components/js/panel/charts/bar/waterfall.ts
View File

@ -11,6 +11,7 @@ import { isEmpty } from 'lodash-es'
export class Waterfall extends G2PlotChartView<WaterfallOptions, G2Waterfall> {
properties: EditorProperty[] = [
'background-overall-component',
'border-style',
'basic-style-selector',
'label-selector',
'tooltip-selector',
@ -21,6 +22,7 @@ export class Waterfall extends G2PlotChartView<WaterfallOptions, G2Waterfall> {
]
propertyInner: EditorPropertyInner = {
'background-overall-component': ['all'],
'border-style': ['all'],
'basic-style-selector': ['colors', 'alpha', 'gradient'],
'label-selector': ['fontSize', 'color', 'vPosition', 'labelFormatter'],
'tooltip-selector': ['fontSize', 'color', 'backgroundColor', 'seriesTooltipFormatter', 'show'],

2
core/core-frontend/src/views/chart/components/js/panel/charts/line/common.ts
View File

@ -1,5 +1,6 @@
export const LINE_EDITOR_PROPERTY: EditorProperty[] = [
'background-overall-component',
'border-style',
'basic-style-selector',
'x-axis-selector',
'y-axis-selector',
@ -14,6 +15,7 @@ export const LINE_EDITOR_PROPERTY: EditorProperty[] = [
]
export const LINE_EDITOR_PROPERTY_INNER: EditorPropertyInner = {
'background-overall-component': ['all'],
'border-style': ['all'],
'label-selector': ['fontSize', 'color'],
'tooltip-selector': ['fontSize', 'color', 'backgroundColor', 'show'],
'basic-style-selector': [

1
core/core-frontend/src/views/chart/components/js/panel/charts/line/stock-line.ts
View File

@ -17,6 +17,7 @@ const DEFAULT_DATA = []
export class StockLine extends G2PlotChartView<MixOptions, Mix> {
properties: EditorProperty[] = [
'background-overall-component',
'border-style',
'basic-style-selector',
'x-axis-selector',
'y-axis-selector',

2
core/core-frontend/src/views/chart/components/js/panel/charts/liquid/liquid.ts
View File

@ -16,6 +16,7 @@ const DEFAULT_LIQUID_DATA = []
export class Liquid extends G2PlotChartView<LiquidOptions, G2Liquid> {
properties: EditorProperty[] = [
'background-overall-component',
'border-style',
'basic-style-selector',
'label-selector',
'misc-selector',
@ -24,6 +25,7 @@ export class Liquid extends G2PlotChartView<LiquidOptions, G2Liquid> {
]
propertyInner: EditorPropertyInner = {
'background-overall-component': ['all'],
'border-style': ['all'],
'basic-style-selector': ['colors', 'alpha'],
'label-selector': ['fontSize', 'color', 'labelFormatter'],
'misc-selector': ['liquidShape', 'liquidSize', 'liquidMaxType', 'liquidMaxField'],

2
core/core-frontend/src/views/chart/components/js/panel/charts/map/common.ts
View File

@ -1,5 +1,6 @@
export const MAP_EDITOR_PROPERTY: EditorProperty[] = [
'background-overall-component',
'border-style',
'basic-style-selector',
'title-selector',
'label-selector',
@ -12,6 +13,7 @@ export const MAP_EDITOR_PROPERTY: EditorProperty[] = [
export const MAP_EDITOR_PROPERTY_INNER: EditorPropertyInner = {
'background-overall-component': ['all'],
'border-style': ['all'],
'basic-style-selector': ['colors', 'alpha', 'areaBorderColor', 'zoom'],
'title-selector': [
'title',

1
core/core-frontend/src/views/chart/components/js/panel/charts/map/flow-map.ts
View File

@ -21,6 +21,7 @@ const { t } = useI18n()
export class FlowMap extends L7ChartView<Scene, L7Config> {
properties: EditorProperty[] = [
'background-overall-component',
'border-style',
'basic-style-selector',
'title-selector',
'flow-map-line-selector',

1
core/core-frontend/src/views/chart/components/js/panel/charts/map/heat-map.ts
View File

@ -21,6 +21,7 @@ const { t } = useI18n()
export class HeatMap extends L7ChartView<Scene, L7Config> {
properties: EditorProperty[] = [
'background-overall-component',
'border-style',
'basic-style-selector',
'title-selector'
]

1
core/core-frontend/src/views/chart/components/js/panel/charts/map/symbolic-map.ts
View File

@ -22,6 +22,7 @@ const { t } = useI18n()
export class SymbolicMap extends L7ChartView<Scene, L7Config> {
properties: EditorProperty[] = [
'background-overall-component',
'border-style',
'basic-style-selector',
'title-selector',
'label-selector',

2
core/core-frontend/src/views/chart/components/js/panel/charts/others/chart-mix-common.ts
View File

@ -2,6 +2,7 @@ import { DEFAULT_BASIC_STYLE } from '@/views/chart/components/editor/util/chart'
export const CHART_MIX_EDITOR_PROPERTY: EditorProperty[] = [
'background-overall-component',
'border-style',
'dual-basic-style-selector',
'x-axis-selector',
'dual-y-axis-selector',
@ -16,6 +17,7 @@ export const CHART_MIX_EDITOR_PROPERTY: EditorProperty[] = [
]
export const CHART_MIX_EDITOR_PROPERTY_INNER: EditorPropertyInner = {
'background-overall-component': ['all'],
'border-style': ['all'],
'label-selector': ['fontSize', 'color'],
'tooltip-selector': ['fontSize', 'color', 'backgroundColor', 'show'],
'dual-basic-style-selector': [

2
core/core-frontend/src/views/chart/components/js/panel/charts/others/funnel.ts
View File

@ -14,6 +14,7 @@ const { t } = useI18n()
export class Funnel extends G2PlotChartView<FunnelOptions, G2Funnel> {
properties: EditorProperty[] = [
'background-overall-component',
'border-style',
'basic-style-selector',
'label-selector',
'tooltip-selector',
@ -24,6 +25,7 @@ export class Funnel extends G2PlotChartView<FunnelOptions, G2Funnel> {
]
propertyInner: EditorPropertyInner = {
'background-overall-component': ['all'],
'border-style': ['all'],
'basic-style-selector': ['colors', 'alpha', 'seriesColor'],
'label-selector': ['fontSize', 'color', 'hPosition', 'showQuota', 'conversionTag'],
'tooltip-selector': ['color', 'fontSize', 'backgroundColor', 'seriesTooltipFormatter', 'show'],

2
core/core-frontend/src/views/chart/components/js/panel/charts/others/gauge.ts
View File

@ -21,6 +21,7 @@ const DEFAULT_DATA = []
export class Gauge extends G2PlotChartView<GaugeOptions, G2Gauge> {
properties: EditorProperty[] = [
'background-overall-component',
'border-style',
'basic-style-selector',
'label-selector',
'misc-selector',
@ -29,6 +30,7 @@ export class Gauge extends G2PlotChartView<GaugeOptions, G2Gauge> {
]
propertyInner: EditorPropertyInner = {
'background-overall-component': ['all'],
'border-style': ['all'],
'basic-style-selector': ['colors', 'alpha', 'gradient', 'gaugeAxisLine', 'gaugePercentLabel'],
'label-selector': ['fontSize', 'color', 'labelFormatter'],
'title-selector': [

2
core/core-frontend/src/views/chart/components/js/panel/charts/others/indicator.ts
View File

@ -8,6 +8,7 @@ const { t } = useI18n()
export class IndicatorChartView extends AbstractChartView {
properties: EditorProperty[] = [
'background-overall-component',
'border-style',
'title-selector',
'indicator-value-selector',
'indicator-name-selector',
@ -16,6 +17,7 @@ export class IndicatorChartView extends AbstractChartView {
]
propertyInner: EditorPropertyInner = {
'background-overall-component': ['all'],
'border-style': ['all'],
'title-selector': [
'title',
'fontSize',

1
core/core-frontend/src/views/chart/components/js/panel/charts/others/quadrant.ts
View File

@ -16,6 +16,7 @@ const { t } = useI18n()
export class Quadrant extends G2PlotChartView<ScatterOptions, G2Scatter> {
properties: EditorProperty[] = [
'background-overall-component',
'border-style',
'basic-style-selector',
'x-axis-selector',
'y-axis-selector',

1
core/core-frontend/src/views/chart/components/js/panel/charts/others/radar.ts
View File

@ -13,6 +13,7 @@ const { t } = useI18n()
export class Radar extends G2PlotChartView<RadarOptions, G2Radar> {
properties: EditorProperty[] = [
'background-overall-component',
'border-style',
'basic-style-selector',
'label-selector',
'tooltip-selector',

3
core/core-frontend/src/views/chart/components/js/panel/charts/others/rich-text.ts
View File

@ -6,9 +6,10 @@ const { t } = useI18n()
* 富文本图表
*/
export class RichTextChartView extends AbstractChartView {
properties: EditorProperty[] = ['background-overall-component', 'threshold']
properties: EditorProperty[] = ['background-overall-component', 'border-style', 'threshold']
propertyInner: EditorPropertyInner = {
'background-overall-component': ['all'],
'border-style': ['all'],
threshold: ['tableThreshold']
}
axis: AxisType[] = ['xAxis', 'yAxis', 'filter']

2
core/core-frontend/src/views/chart/components/js/panel/charts/others/sankey-common.ts
View File

@ -1,5 +1,6 @@
export const SANKEY_EDITOR_PROPERTY: EditorProperty[] = [
'background-overall-component',
'border-style',
'basic-style-selector',
'label-selector',
'tooltip-selector',
@ -10,6 +11,7 @@ export const SANKEY_EDITOR_PROPERTY: EditorProperty[] = [
export const SANKEY_EDITOR_PROPERTY_INNER: EditorPropertyInner = {
'background-overall-component': ['all'],
'border-style': ['all'],
'basic-style-selector': ['colors', 'alpha', 'gradient'],
'label-selector': ['fontSize', 'color', 'labelFormatter'],
'tooltip-selector': ['fontSize', 'color', 'tooltipFormatter'],

1
core/core-frontend/src/views/chart/components/js/panel/charts/others/scatter.ts
View File

@ -16,6 +16,7 @@ const { t } = useI18n()
export class Scatter extends G2PlotChartView<ScatterOptions, G2Scatter> {
properties: EditorProperty[] = [
'background-overall-component',
'border-style',
'basic-style-selector',
'x-axis-selector',
'y-axis-selector',

2
core/core-frontend/src/views/chart/components/js/panel/charts/others/treemap.ts
View File

@ -16,6 +16,7 @@ const { t } = useI18n()
export class Treemap extends G2PlotChartView<TreemapOptions, G2Treemap> {
properties: EditorProperty[] = [
'background-overall-component',
'border-style',
'basic-style-selector',
'title-selector',
'legend-selector',
@ -26,6 +27,7 @@ export class Treemap extends G2PlotChartView<TreemapOptions, G2Treemap> {
]
propertyInner: EditorPropertyInner = {
'background-overall-component': ['all'],
'border-style': ['all'],
'basic-style-selector': ['colors', 'alpha', 'seriesColor'],
'label-selector': ['fontSize', 'color', 'showDimension', 'showQuota', 'showProportion'],
'legend-selector': ['icon', 'orient', 'fontSize', 'color', 'hPosition', 'vPosition'],

2
core/core-frontend/src/views/chart/components/js/panel/charts/others/word-cloud.ts
View File

@ -19,6 +19,7 @@ export class WordCloud extends G2PlotChartView<WordCloudOptions, G2WordCloud> {
properties: EditorProperty[] = [
'basic-style-selector',
'background-overall-component',
'border-style',
'title-selector',
'tooltip-selector',
'misc-selector',
@ -27,6 +28,7 @@ export class WordCloud extends G2PlotChartView<WordCloudOptions, G2WordCloud> {
]
propertyInner: EditorPropertyInner = {
'background-overall-component': ['all'],
'border-style': ['all'],
'basic-style-selector': ['colors', 'alpha'],
'title-selector': [
'title',

2
core/core-frontend/src/views/chart/components/js/panel/charts/pie/common.ts
View File

@ -4,6 +4,7 @@ const { t } = useI18n()
export const PIE_EDITOR_PROPERTY: EditorProperty[] = [
'background-overall-component',
'border-style',
'basic-style-selector',
'title-selector',
'legend-selector',
@ -14,6 +15,7 @@ export const PIE_EDITOR_PROPERTY: EditorProperty[] = [
]
export const PIE_EDITOR_PROPERTY_INNER: EditorPropertyInner = {
'background-overall-component': ['all'],
'border-style': ['all'],
'label-selector': [
'fontSize',
'color',

2
core/core-frontend/src/views/chart/components/js/panel/charts/table/common.ts
View File

@ -1,5 +1,6 @@
export const TABLE_EDITOR_PROPERTY: EditorProperty[] = [
'background-overall-component',
'border-style',
'basic-style-selector',
'table-header-selector',
'table-cell-selector',
@ -12,6 +13,7 @@ export const TABLE_EDITOR_PROPERTY: EditorProperty[] = [
'linkage'
]
export const TABLE_EDITOR_PROPERTY_INNER: EditorPropertyInner = {
'border-style': ['all'],
'background-overall-component': ['all'],
'basic-style-selector': ['tableColumnMode', 'tableBorderColor', 'tableScrollBarColor', 'alpha'],
'table-header-selector': [

1
core/core-frontend/src/views/chart/components/js/panel/charts/table/table-pivot.ts
View File

@ -14,6 +14,7 @@ const { t } = useI18n()
*/
export class TablePivot extends S2ChartView<PivotSheet> {
properties: EditorProperty[] = [
'border-style',
'background-overall-component',
'basic-style-selector',
'table-header-selector',