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

style(图表): 当切换图表类型时，如果图表缺字段展示不出来而显示空白时,那么显示当前图表类型的图标

Browse Source
This commit is contained in:
jianneng-fit2cloud 2024-10-08 10:01:26 +08:00
parent 0eb78ab7ad
commit 241e18e215
19 changed files with 146 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -88,6 +88,10 @@ declare type AxisSpec = {
* 轴提示
*/
tooltip?: string
/**
* 允许为空
*/
allowEmpty?: boolean
}
/**
* 图表编辑表单

2
core/core-frontend/src/views/chart/components/editor/editor-style/components/TooltipSelector.vue
View File

@ -250,7 +250,7 @@ const init = () => {
const showProperty = prop => {
const instance = chartViewManager.getChartView(props.chart.render, props.chart.type)
if (instance) {
return instance.propertyInner['tooltip-selector'].includes(prop)
return instance.propertyInner['tooltip-selector']?.includes(prop)
}
return props.propertyInner?.includes(prop)
}

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

@ -836,6 +836,7 @@ const calcData = (view, resetDrill = false, updateQuery = '') => {
const updateChartData = view => {
curComponent.value['state'] = 'ready'
useEmitt().emitter.emit('checkFieldIsAllowEmpty', allFields.value)
calcData(view, true, 'updateQuery')
}

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

@ -31,6 +31,10 @@ const DEFAULT_DATA = []
export class HorizontalBar extends G2PlotChartView<BarOptions, Bar> {
axisConfig = {
...this['axisConfig'],
xAxis: {
name: `${t('chart.drag_block_type_axis')} / ${t('chart.dimension')}`,
type: 'd'
},
yAxis: {
name: `${t('chart.drag_block_value_axis')} / ${t('chart.quota')}`,
type: 'q'
@ -301,6 +305,14 @@ export class HorizontalBar extends G2PlotChartView<BarOptions, Bar> {
* 堆叠条形图
*/
export class HorizontalStackBar extends HorizontalBar {
axisConfig = {
...this['axisConfig'],
extStack: {
name: `${t('chart.stack_item')} / ${t('chart.dimension')}`,
type: 'd',
limit: 1
}
}
propertyInner = {
...this['propertyInner'],
'label-selector': ['color', 'fontSize', 'hPosition', 'labelFormatter'],

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

@ -15,7 +15,6 @@ const { t } = useI18n()
export class ProgressBar extends G2PlotChartView<BarOptions, G2Progress> {
axisConfig = {
...this['axisConfig'],
xAxis: {
name: `${t('chart.form_type')} / ${t('chart.dimension')}`,
type: 'd',

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

@ -23,7 +23,6 @@ const DEFAULT_DATA = []
*/
export class RangeBar extends G2PlotChartView<BarOptions, Bar> {
axisConfig = {
...this['axisConfig'],
yAxis: {
name: `${t('chart.drag_block_value_start')} / ${t('chart.time_dimension_or_quota')}`,
limit: 1,

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

@ -4,6 +4,8 @@ import { flow, hexColorToRGBA, parseJson } from '../../../util'
import { valueFormatter } from '../../../formatter'
import { getPadding, getTooltipSeriesTotalMap, setGradientColor } from '../../common/common_antv'
import { isEmpty } from 'lodash-es'
import { useI18n } from '@/hooks/web/useI18n'
const { t } = useI18n()
/**
* 瀑布图
@ -62,6 +64,17 @@ export class Waterfall extends G2PlotChartView<WaterfallOptions, G2Waterfall> {
]
}
axis: AxisType[] = ['xAxis', 'yAxis', 'filter', 'drill', 'extLabel', 'extTooltip']
axisConfig = {
xAxis: {
name: `${t('chart.drag_block_type_axis')} / ${t('chart.dimension')}`,
type: 'd'
},
yAxis: {
name: `${t('chart.drag_block_value_axis')} / ${t('chart.quota')}`,
type: 'q',
limit: 1
}
}
async drawChart(drawOptions: G2PlotDrawOptions<G2Waterfall>): Promise<G2Waterfall> {
const { chart, container, action } = drawOptions
if (!chart.data?.data) {

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

@ -44,6 +44,10 @@ export class Area extends G2PlotChartView<AreaOptions, G2Area> {
axis: AxisType[] = [...LINE_AXIS_TYPE]
axisConfig = {
...this['axisConfig'],
xAxis: {
name: `${t('chart.drag_block_type_axis')} / ${t('chart.dimension')}`,
type: 'd'
},
yAxis: {
name: `${t('chart.drag_block_value_axis')} / ${t('chart.quota')}`,
type: 'q'
@ -289,6 +293,14 @@ export class StackArea extends Area {
'label-selector': ['fontSize', 'color', 'labelFormatter'],
'tooltip-selector': ['fontSize', 'color', 'tooltipFormatter', 'show']
}
axisConfig = {
...this['axisConfig'],
extStack: {
name: `${t('chart.stack_item')} / ${t('chart.dimension')}`,
type: 'd',
limit: 1
}
}
protected configLabel(chart: Chart, options: AreaOptions): AreaOptions {
const customAttr = parseJson(chart.customAttr)
const labelAttr = customAttr.label

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

@ -42,6 +42,15 @@ export class Line extends G2PlotChartView<LineOptions, G2Line> {
axis: AxisType[] = [...LINE_AXIS_TYPE, 'xAxisExt']
axisConfig = {
...this['axisConfig'],
xAxis: {
name: `${t('chart.drag_block_type_axis')} / ${t('chart.dimension')}`,
type: 'd'
},
xAxisExt: {
name: `${t('chart.chart_group')} / ${t('chart.dimension')}`,
type: 'd',
limit: 1
},
yAxis: {
name: `${t('chart.drag_block_value_axis')} / ${t('chart.quota')}`,
type: 'q'

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

@ -46,7 +46,6 @@ export class StockLine extends G2PlotChartView<MixOptions, Mix> {
}
axis: AxisType[] = ['xAxis', 'yAxis', 'filter', 'extLabel', 'extTooltip']
axisConfig = {
...this['axisConfig'],
xAxis: {
name: `日期 / ${t('chart.dimension')}`,
limit: 1,

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

@ -47,18 +47,21 @@ export class FlowMap extends L7ChartView<Scene, L7Config> {
flowMapStartName: {
name: `起点名称 / ${t('chart.dimension')}`,
type: 'd',
limit: 1
limit: 1,
allowEmpty: true
},
flowMapEndName: {
name: `终点名称 / ${t('chart.dimension')}`,
type: 'd',
limit: 1
limit: 1,
allowEmpty: true
},
yAxis: {
name: `线条粗细 / ${t('chart.quota')}`,
type: 'q',
limit: 1,
tooltip: '该指标生效时，样式中线条配置的线条宽度属性将失效'
tooltip: '该指标生效时，样式中线条配置的线条宽度属性将失效',
allowEmpty: true
}
}
constructor() {

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

@ -52,13 +52,15 @@ export class SymbolicMap extends L7ChartView<Scene, L7Config> {
xAxisExt: {
name: `颜色 / ${t('chart.dimension')}`,
type: 'd',
limit: 1
limit: 1,
allowEmpty: true
},
extBubble: {
name: `${t('chart.bubble_size')} / ${t('chart.quota')}`,
type: 'q',
limit: 1,
tooltip: '该指标生效时，样式基础样式中的大小属性将失效'
tooltip: '该指标生效时，样式基础样式中的大小属性将失效',
allowEmpty: true
}
}
constructor() {

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

@ -88,11 +88,11 @@ export class Quadrant extends G2PlotChartView<ScatterOptions, G2Scatter> {
'extTooltip'
]
axisConfig: AxisConfig = {
...this['axisConfig'],
extBubble: {
name: `${t('chart.bubble_size')} / ${t('chart.quota')}`,
type: 'q',
limit: 1
limit: 1,
allowEmpty: true
},
xAxis: {
name: `${t('chart.form_type')} / ${t('chart.dimension')}`,
@ -413,7 +413,7 @@ export class Quadrant extends G2PlotChartView<ScatterOptions, G2Scatter> {
if (!(xAxis?.length && yAxis?.length && yAxisExt?.length)) {
return []
}
const tmp = data[0].data
const tmp = data?.[0]?.data
return setUpSingleDimensionSeriesColor(chart, tmp)
}
protected setupOptions(chart: Chart, options: ScatterOptions) {

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

@ -24,7 +24,6 @@ const DEFAULT_DATA = []
*/
export class RangeBar extends G2PlotChartView<SankeyOptions, Sankey> {
axisConfig = {
...this['axisConfig'],
xAxis: {
name: `${t('chart.drag_block_type_axis_start')} / ${t('chart.dimension')}`,
limit: 1,

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

@ -75,7 +75,10 @@ export class Scatter extends G2PlotChartView<ScatterOptions, G2Scatter> {
}
axis: AxisType[] = ['xAxis', 'yAxis', 'extBubble', 'filter', 'drill', 'extLabel', 'extTooltip']
axisConfig: AxisConfig = {
...this['axisConfig'],
xAxis: {
name: `${t('chart.drag_block_type_axis')} / ${t('chart.dimension')}`,
type: 'd'
},
yAxis: {
...this['axisConfig'].yAxis,
limit: undefined
@ -83,7 +86,8 @@ export class Scatter extends G2PlotChartView<ScatterOptions, G2Scatter> {
extBubble: {
name: `${t('chart.bubble_size')} / ${t('chart.quota')}`,
type: 'q',
limit: 1
limit: 1,
allowEmpty: true
}
}
async drawChart(drawOptions: G2PlotDrawOptions<G2Scatter>): Promise<G2Scatter> {

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

@ -73,7 +73,7 @@ export class TableInfo extends S2ChartView<TableSheet> {
const containerDom = document.getElementById(container)
// fields
let fields = chart.data.fields
let fields = chart.data?.fields ?? []
const columns = []
const meta = []
const axisMap = chart.xAxis.reduce((pre, cur) => {

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

@ -107,7 +107,8 @@ export class TablePivot extends S2ChartView<PivotSheet> {
},
xAxisExt: {
name: `${t('chart.drag_block_table_data_column')} / ${t('chart.dimension')}`,
type: 'd'
type: 'd',
allowEmpty: true
},
yAxis: {
name: `${t('chart.drag_block_table_data_column')} / ${t('chart.quota')}`,

12
core/core-frontend/src/views/chart/components/js/panel/types/index.ts
View File

@ -80,22 +80,26 @@ export abstract class AntVAbstractChartView extends AbstractChartView {
axisConfig: AxisConfig = {
xAxis: {
name: `${t('chart.drag_block_type_axis')} / ${t('chart.dimension')}`,
type: 'd'
type: 'd',
allowEmpty: true
},
xAxisExt: {
name: `${t('chart.chart_group')} / ${t('chart.dimension')}`,
type: 'd',
limit: 1
limit: 1,
allowEmpty: true
},
extStack: {
name: `${t('chart.stack_item')} / ${t('chart.dimension')}`,
type: 'd',
limit: 1
limit: 1,
allowEmpty: true
},
yAxis: {
name: `${t('chart.drag_block_value_axis')} / ${t('chart.quota')}`,
type: 'q',
limit: 1
limit: 1,
allowEmpty: true
}
}
selectorSpec: EditorSelectorSpec = {

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

@ -573,13 +573,74 @@ onBeforeMount(() => {
const listenerEnable = computed(() => {
return !showPosition.value.includes('viewDialog')
})
const showEmpty = ref(false)
const checkFieldIsAllowEmpty = (allField?) => {
showEmpty.value = false
if (view.value?.render && view.value?.type) {
const chartView = chartViewManager.getChartView(view.value.render, view.value.type)
const axisConfigMap = new Map(Object.entries(chartView.axisConfig))
// 验证拖入的字段是否包含在当前数据集字段中，如果一个都不在数据集字段中，则显示空图表
let includeDatasetField = false
if (allField && allField.length > 0) {
axisConfigMap.forEach((value, key) => {
if (view.value?.[key]?.length > 0) {
view.value[key].forEach(item => {
if (!allField.find(field => field.id === item.id)) {
includeDatasetField = true
return false
}
})
if (includeDatasetField) {
return false
}
}
})
}
if (includeDatasetField) {
showEmpty.value = true
return
}
axisConfigMap.forEach((value, key) => {
// 不允许为空,并且没限制长度
if (!value['allowEmpty'] && !value['limit'] && view.value?.[key]?.length === 0) {
showEmpty.value = true
return false
}
// 不允许为空， 限制长度
if (
!value['allowEmpty'] &&
value['limit'] &&
view.value?.[key]?.length < parseInt(value['limit'])
) {
showEmpty.value = true
return false
}
if (view.value?.type === 'table-info' && view.value?.[key]?.length === 0) {
showEmpty.value = true
return false
}
})
}
}
const changeChartType = () => {
checkFieldIsAllowEmpty()
}
const changeDataset = () => {
checkFieldIsAllowEmpty()
}
onMounted(() => {
if (!view.value.isPlugin) {
queryData(true && !showPosition.value.includes('viewDialog'))
queryData(!showPosition.value.includes('viewDialog'))
}
if (!listenerEnable.value) {
return
}
useEmitt({
name: 'checkFieldIsAllowEmpty',
callback: allField => checkFieldIsAllowEmpty(allField)
})
useEmitt({ name: 'chart-type-change', callback: changeChartType })
useEmitt({ name: 'dataset-change', callback: changeDataset })
useEmitt({
name: 'clearPanelLinkage',
callback: function (param) {
@ -913,7 +974,7 @@ const loadPluginCategory = data => {
</transition>
</div>
<!--这里去渲染不同图库的图表-->
<div v-if="chartAreaShow" style="flex: 1; overflow: hidden">
<div v-if="chartAreaShow && !showEmpty" style="flex: 1; overflow: hidden">
<plugin-component
v-if="view.plugin?.isPlugin"
:jsname="view.plugin.staticMap['index']"
@ -991,7 +1052,7 @@ const loadPluginCategory = data => {
/>
</div>
<chart-empty-info
v-if="!chartAreaShow"
v-if="!chartAreaShow || showEmpty"
:themes="canvasStyleData.dashboard.themeColor"
:view-icon="view.type"
></chart-empty-info>