feat(图表): 明细表和汇总表支持隐藏字段 #10700

core/core-frontend/src/components/visualization/UserViewEnlarge.vue

@@ -281,6 +281,8 @@ const dialogInit = (canvasStyle, view, item, opt, params = { scale: 0.5 }) => {
   if (opt === 'details') {
     if (!viewInfo.value.type?.includes('table')) {
       assign(viewInfo.value, DETAIL_CHART_ATTR)
+      viewInfo.value.xAxis.forEach(i => (i.hide = false))
+      viewInfo.value.yAxis.forEach(i => (i.hide = false))
     } else {
       assign(viewInfo.value, DETAIL_TABLE_ATTR)
     }

core/core-frontend/src/locales/zh-CN.ts

@@ -1540,7 +1540,8 @@ export default {
     map_symbol_hexagon: '六角形',
     map_symbol_octagon: '八角形',
     map_symbol_hexagram: '菱形',
-    tip: '提示'
+    tip: '提示',
+    hide: '隐藏'
   },
   dataset: {
     scope_edit: '仅编辑时生效',

core/core-frontend/src/models/chart/chart.d.ts

@@ -164,6 +164,10 @@ declare interface Axis extends ChartViewField {
    * 自定义排序项
    */
   customSort: string[]
+  /**
+   * 是否隐藏
+   */
+  hide: boolean
 }
 declare interface ChartViewField {
   /**

core/core-frontend/src/views/chart/components/editor/drag-item/DimensionItem.vue

@@ -58,7 +58,8 @@ const emit = defineEmits([
   'onCustomSort',
   'onDimensionItemChange',
   'onNameEdit',
-  'valueFormatter'
+  'valueFormatter',
+  'onToggleHide'
 ])
 
 const { item } = toRefs(props)
@@ -97,6 +98,9 @@ const clickItem = param => {
     case 'formatter':
       valueFormatter()
       break
+    case 'toggleHide':
+      toggleHide()
+      break
     default:
       break
   }
@@ -104,7 +108,7 @@ const clickItem = param => {
 
 const beforeClickItem = type => {
   return {
-    type: type
+    type
   }
 }
 
@@ -192,6 +196,15 @@ const showSort = () => {
   }
   return !isChartMix || isDimensionOrDimensionStack
 }
+const toggleHide = () => {
+  item.value.index = props.index
+  item.value.hide = !item.value.hide
+  item.value.axisType = props.type
+  emit('onToggleHide', item.value)
+}
+const showHideIcon = computed(() => {
+  return ['table-info', 'table-normal'].includes(props.chart.type) && item.value.hide
+})
 onMounted(() => {
   getItemTagType()
 })
@@ -251,7 +264,9 @@ onMounted(() => {
             <span class="item-name">{{ item.chartShowName ? item.chartShowName : item.name }}</span>
           </span>
         </el-tooltip>
-
+        <el-icon style="margin-left: 8px">
+          <Icon><Hide v-show="showHideIcon" class="svg-icon inner-class" /></Icon>
+        </el-icon>
         <el-tooltip :effect="toolTip" placement="top">
           <template #content>
             <span>{{ t('chart.delete') }}</span>
@@ -593,6 +608,17 @@ onMounted(() => {
             </el-icon>
             <span>{{ t('chart.show_name_set') }}</span>
           </el-dropdown-item>
+          <el-dropdown-item
+            class="menu-item-padding"
+            v-if="['table-normal', 'table-info'].includes(chart.type)"
+            :command="beforeClickItem('toggleHide')"
+          >
+            <el-icon>
+              <icon v-if="item.hide === true" name="view"><View class="svg-icon" /></icon>
+              <icon v-else name="hide"><Hide class="svg-icon" /></icon>
+            </el-icon>
+            <span>{{ item.hide === true ? t('chart.show') : t('chart.hide') }}</span>
+          </el-dropdown-item>
           <el-dropdown-item
             class="menu-item-padding"
             v-if="showValueFormatter"

core/core-frontend/src/views/chart/components/editor/drag-item/QuotaItem.vue

@@ -72,7 +72,8 @@ const emit = defineEmits([
   'onNameEdit',
   'editItemFilter',
   'editItemCompare',
-  'valueFormatter'
+  'valueFormatter',
+  'onToggleHide'
 ])
 
 const { item, chart } = toRefs(props)
@@ -162,6 +163,9 @@ const clickItem = param => {
     case 'formatter':
       valueFormatter()
       break
+    case 'toggleHide':
+      toggleHide()
+      break
     default:
       break
   }
@@ -169,7 +173,7 @@ const clickItem = param => {
 
 const beforeClickItem = type => {
   return {
-    type: type
+    type
   }
 }
 
@@ -285,7 +289,15 @@ const valueFormatter = () => {
   item.value.formatterType = props.type
   emit('valueFormatter', item.value)
 }
-
+const toggleHide = () => {
+  item.value.index = props.index
+  item.value.hide = !item.value.hide
+  item.value.axisType = props.type
+  emit('onToggleHide', item.value)
+}
+const showHideIcon = computed(() => {
+  return ['tale-info', 'table-normal'].includes(props.chart.type) && item.value.hide
+})
 onMounted(() => {
   isEnableCompare()
   getItemTagType()
@@ -352,6 +364,15 @@ onMounted(() => {
             -{{ t('chart.' + item.compareCalc.type) }}
           </span>
         </span>
+        <el-icon style="margin-left: 8px">
+          <Icon>
+            <Hide
+              v-show="showHideIcon"
+              :class="`field-icon-${fieldType[[2, 3].includes(item.deType) ? 2 : 0]}`"
+              class="svg-icon inner-class"
+            />
+          </Icon>
+        </el-icon>
         <el-tooltip :effect="toolTip" placement="top">
           <template #content>
             <span>{{ t('chart.delete') }}</span>
@@ -734,6 +755,17 @@ onMounted(() => {
             </el-icon>
             <span>{{ t('chart.show_name_set') }}</span>
           </el-dropdown-item>
+          <el-dropdown-item
+            class="menu-item-padding"
+            v-if="['table-normal', 'table-info'].includes(chart.type)"
+            :command="beforeClickItem('toggleHide')"
+          >
+            <el-icon>
+              <icon v-if="item.hide === true" name="view"><View class="svg-icon" /></icon>
+              <icon v-else name="hide"><Hide class="svg-icon" /></icon>
+            </el-icon>
+            <span>{{ item.hide === true ? t('chart.show') : t('chart.hide') }}</span>
+          </el-dropdown-item>
           <el-dropdown-item class="menu-item-padding" :command="beforeClickItem('remove')">
             <el-icon>
               <icon name="icon_delete-trash_outlined"

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

@@ -1398,7 +1398,20 @@ const saveQuotaEditCompare = () => {
   }
   closeQuotaEditCompare()
 }
-
+const onToggleHide = item => {
+  recordSnapshotInfo('render')
+  switch (item.axisType) {
+    case 'dimension':
+      view.value.xAxis[item.index].hide = item.hide
+      break
+    case 'quota':
+      view.value.yAxis[item.index].hide = item.hide
+      break
+    default:
+      break
+  }
+  renderChart(view.value)
+}
 const valueFormatter = item => {
   recordSnapshotInfo('render')
   state.valueFormatterItem = JSON.parse(JSON.stringify(item))
@@ -1964,6 +1977,7 @@ const deleteChartFieldItem = id => {
                                 @onNameEdit="showRename"
                                 @onCustomSort="onCustomSort"
                                 @valueFormatter="valueFormatter"
+                                @onToggleHide="onToggleHide"
                               />
                             </template>
                           </draggable>
@@ -2366,6 +2380,7 @@ const deleteChartFieldItem = id => {
                                   @editItemFilter="showQuotaEditFilter"
                                   @editItemCompare="showQuotaEditCompare"
                                   @valueFormatter="valueFormatter"
+                                  @onToggleHide="onToggleHide"
                                 />
                               </template>
                             </draggable>

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

@@ -105,6 +105,9 @@ export class TableInfo extends S2ChartView<TableSheet> {
     }
     fields.forEach(ele => {
       const f = axisMap[ele.dataeaseName]
+      if (f?.hide === true) {
+        return
+      }
       columns.push(ele.dataeaseName)
       meta.push({
         field: ele.dataeaseName,
@@ -153,7 +156,9 @@ export class TableInfo extends S2ChartView<TableSheet> {
     s2Options.style = this.configStyle(chart, s2DataConfig)
     // 自适应列宽模式下，URL 字段的宽度固定为 120
     if (customAttr.basicStyle.tableColumnMode === 'adapt') {
-      const urlFields = fields.filter(field => field.deType === 7)
+      const urlFields = fields.filter(
+        field => field.deType === 7 && !axisMap[field.dataeaseName]?.hide
+      )
       s2Options.style.colCfg.widthByFieldValue = urlFields?.reduce((p, n) => {
         p[n.chartShowName ?? n.name] = 120
         return p
@@ -236,7 +241,9 @@ export class TableInfo extends S2ChartView<TableSheet> {
           return
         }
         // 第一次渲染初始化，把图片字段固定为 120 进行计算
-        const urlFields = fields.filter(field => field.deType === 7).map(f => f.dataeaseName)
+        const urlFields = fields
+          .filter(field => field.deType === 7 && !axisMap[field.dataeaseName]?.hide)
+          .map(f => f.dataeaseName)
         const totalWidthWithImg = ev.colLeafNodes.reduce((p, n) => {
           return p + (urlFields.includes(n.field) ? 120 : n.width)
         }, 0)

core/core-frontend/src/views/chart/components/js/panel/charts/table/table-normal.ts

@@ -93,6 +93,9 @@ export class TableNormal extends S2ChartView<TableSheet> {
     // add drill list
     fields.forEach(ele => {
       const f = axisMap[ele.dataeaseName]
+      if (f?.hide === true) {
+        return
+      }
       columns.push(ele.dataeaseName)
       meta.push({
         field: ele.dataeaseName,
@@ -139,7 +142,9 @@ export class TableNormal extends S2ChartView<TableSheet> {
         renderTooltip: sheet => new SortTooltip(sheet)
       }
     }
+    // 列宽设置
     s2Options.style = this.configStyle(chart, s2DataConfig)
+    // 行列冻结
     if (customAttr.tableCell.tableFreeze) {
       s2Options.frozenColCount = customAttr.tableCell.tableColumnFreezeHead ?? 0
       s2Options.frozenRowCount = customAttr.tableCell.tableRowFreezeHead ?? 0

core/core-frontend/src/views/chart/components/js/panel/common/common_table.ts

@@ -485,7 +485,7 @@ export function getStyle(chart: Chart, dataConfig: S2DataConfig): Style {
         delete style.layoutWidthType
         style.colCfg.width = node => {
           const width = node.spreadsheet.container.cfg.el.offsetWidth
-          const fieldsSize = chart.data?.fields?.length
+          const fieldsSize = node.spreadsheet.dataCfg.meta.length
           if (!fieldsSize) {
             return 0
           }

sdk/extensions/extensions-view/src/main/java/io/dataease/extensions/view/dto/ChartViewFieldDTO.java

@@ -25,6 +25,8 @@ public class ChartViewFieldDTO extends ChartViewFieldBaseDTO implements Serializ
 
     private boolean isAgg;
 
+    private boolean hide;
+
     /**
      * 字段来源
      */