feat(图表): 明细表/汇总表可控制表头排序开关和图标颜色 #8147

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

@@ -642,6 +642,7 @@ export default {
     table_header_font_color: '表头字体',
     table_item_font_color: '表格字体',
     table_show_index: '显示序号',
+    table_header_sort: '开启表头排序',
     stripe: '斑马纹',
     start_angle: '起始角度',
     end_angle: '结束角度',

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

@@ -221,6 +221,10 @@ declare interface ChartTableHeaderAttr {
    * 序号表头名称
    */
   indexLabel: string
+  /**
+   * 表头排序开关
+   */
+  tableHeaderSort: boolean
 }
 /**
  * 单元格属性

core/core-frontend/src/views/chart/components/editor/editor-style/components/table/TableHeaderSelector.vue

@@ -236,6 +236,21 @@ onMounted(() => {
         @blur="changeTableHeader('indexLabel')"
       />
     </el-form-item>
+    <el-form-item
+      :label="t('chart.table_show_index')"
+      class="form-item"
+      :class="'form-item-' + themes"
+      v-if="showProperty('tableHeaderSort')"
+    >
+      <el-checkbox
+        size="small"
+        :effect="themes"
+        v-model="state.tableHeaderForm.tableHeaderSort"
+        @change="changeTableHeader('tableHeaderSort')"
+      >
+        {{ t('chart.table_header_sort') }}
+      </el-checkbox>
+    </el-form-item>
   </el-form>
 </template>
 

core/core-frontend/src/views/chart/components/editor/util/chart.ts

@@ -329,7 +329,8 @@ export const DEFAULT_TABLE_HEADER: ChartTableHeaderAttr = {
   tableHeaderBgColor: '#6D9A49',
   tableHeaderFontColor: '#000000',
   tableTitleFontSize: 12,
-  tableTitleHeight: 36
+  tableTitleHeight: 36,
+  tableHeaderSort: false
 }
 export const DEFAULT_TABLE_CELL: ChartTableCellAttr = {
   tableFontColor: '#000000',

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

@@ -16,6 +16,10 @@ export class TableInfo extends S2ChartView<TableSheet> {
   properties = TABLE_EDITOR_PROPERTY
   propertyInner = {
     ...TABLE_EDITOR_PROPERTY_INNER,
+    'table-header-selector': [
+      ...TABLE_EDITOR_PROPERTY_INNER['table-header-selector'],
+      'tableHeaderSort'
+    ],
     'basic-style-selector': [
       'tableColumnMode',
       'tableBorderColor',
@@ -131,6 +135,8 @@ export class TableInfo extends S2ChartView<TableSheet> {
     }
     // tooltip
     this.configTooltip(s2Options)
+    // header interaction
+    this.configHeaderInteraction(chart, s2Options)
     // 开始渲染
     const newChart = new TableSheet(containerDom, s2DataConfig, s2Options)
 

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

@@ -13,7 +13,13 @@ const { t } = useI18n()
  */
 export class TableNormal extends S2ChartView<TableSheet> {
   properties = TABLE_EDITOR_PROPERTY
-  propertyInner = TABLE_EDITOR_PROPERTY_INNER
+  propertyInner = {
+    ...TABLE_EDITOR_PROPERTY_INNER,
+    'table-header-selector': [
+      ...TABLE_EDITOR_PROPERTY_INNER['table-header-selector'],
+      'tableHeaderSort'
+    ]
+  }
   axis: AxisType[] = ['xAxis', 'yAxis', 'drill', 'filter']
   axisConfig: AxisConfig = {
     xAxis: {
@@ -125,6 +131,8 @@ export class TableNormal extends S2ChartView<TableSheet> {
     }
     // tooltip
     this.configTooltip(s2Options)
+    // header interaction
+    this.configHeaderInteraction(chart, s2Options)
     // 开始渲染
     const newChart = new TableSheet(containerDom, s2DataConfig, s2Options)
 

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

@@ -639,21 +639,53 @@ class SortTooltip extends BaseTooltip {
     })
   }
 }
-export function configTooltip(option: S2Options) {
+const SORT_DEFAULT =
+  '<svg t="1711681787276" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4355" width="200" height="200"><path d="M922.345786 372.183628l-39.393195 38.687114L676.138314 211.079416l0 683.909301-54.713113 0L621.425202 129.010259l53.320393 0L922.345786 372.183628zM349.254406 894.989741 101.654214 651.815349l39.393195-38.687114 206.814276 199.792349L347.861686 129.010259l54.713113 0 0 765.978459L349.254406 894.988718z" fill="{fill}" p-id="4356"></path></svg>'
+const SORT_UP =
+  '<svg t="1711682928245" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="11756" width="200" height="200"><path d="M960 704L512 256 64 704z" fill="{fill}" p-id="11757"></path></svg>'
+const SORT_DOWN =
+  '<svg t="1711681879346" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4655" width="200" height="200"><path d="M64 320l448 448 448-448z" fill="{fill}" p-id="4656"></path></svg>'
+
+function svg2Base64(svg) {
+  return `data:image/svg+xml;charset=utf-8;base64,${btoa(svg)}`
+}
+
+export function configHeaderInteraction(chart: Chart, option: S2Options) {
+  const { tableHeaderFontColor, tableHeaderSort } = parseJson(chart.customAttr).tableHeader
+  if (!tableHeaderSort) {
+    return
+  }
+  const iconColor = tableHeaderFontColor ?? '#666'
+  const sortDefault = svg2Base64(SORT_DEFAULT.replace('{fill}', iconColor))
+  const sortUp = svg2Base64(SORT_UP.replace('{fill}', iconColor))
+  const sortDown = svg2Base64(SORT_DOWN.replace('{fill}', iconColor))
+  // 防止缓存
+  const randomSuffix = Math.random()
   const sortIconMap = {
-    asc: 'SortUp',
+    asc: `customSortUp${randomSuffix}`,
-    desc: 'SortDown'
+    desc: `customSortDown${randomSuffix}`
   }
-  option.tooltip = {
+  option.customSVGIcons = [
-    ...option.tooltip,
+    {
-    adjustPosition: ({ event }) => {
+      name: `customSortDefault${randomSuffix}`,
-      return getTooltipPosition(event)
+      svg: sortDefault
     },
-    renderTooltip: sheet => new SortTooltip(sheet)
+    {
-  }
+      name: `customSortUp${randomSuffix}`,
+      svg: sortUp
+    },
+    {
+      name: `customSortDown${randomSuffix}`,
+      svg: sortDown
+    }
+  ]
   option.headerActionIcons = [
     {
-      iconNames: ['GroupAsc', 'SortUp', 'SortDown'],
+      iconNames: [
+        `customSortDefault${randomSuffix}`,
+        `customSortUp${randomSuffix}`,
+        `customSortDown${randomSuffix}`
+      ],
       belongsCell: 'colCell',
       displayCondition: (meta, iconName) => {
         if (meta.field === SERIES_NUMBER_FIELD) {
@@ -664,7 +696,7 @@ export function configTooltip(option: S2Options) {
         if (sortType) {
           return iconName === sortIconMap[sortType]
         }
-        return iconName === 'GroupAsc'
+        return iconName === `customSortDefault${randomSuffix}`
       },
       onClick: props => {
         const { meta, event } = props
@@ -681,6 +713,16 @@ export function configTooltip(option: S2Options) {
   ]
 }
 
+export function configTooltip(option: S2Options) {
+  option.tooltip = {
+    ...option.tooltip,
+    adjustPosition: ({ event }) => {
+      return getTooltipPosition(event)
+    },
+    renderTooltip: sheet => new SortTooltip(sheet)
+  }
+}
+
 export function copyContent(s2Instance, event, fieldMeta) {
   event.preventDefault()
   const cell = s2Instance.getCell(event.target)

core/core-frontend/src/views/chart/components/js/panel/types/impl/s2.ts

@@ -5,6 +5,7 @@ import {
 } from '@/views/chart/components/js/panel/types'
 import { S2Theme, SpreadSheet, Style, S2Options } from '@antv/s2'
 import {
+  configHeaderInteraction,
   configTooltip,
   getConditions,
   getCustomTheme,
@@ -44,6 +45,10 @@ export abstract class S2ChartView<P extends SpreadSheet> extends AntVAbstractCha
     configTooltip(option)
   }
 
+  protected configHeaderInteraction(chart: Chart, option: S2Options) {
+    configHeaderInteraction(chart, option)
+  }
+
   protected configConditions(chart: Chart) {
     return getConditions(chart)
   }