From 86d92266ac393be82192160470617c55b146396a Mon Sep 17 00:00:00 2001
From: jianneng-fit2cloud <jianneng.pan@fit2cloud.com>
Date: Tue, 26 Nov 2024 10:14:06 +0800
Subject: [PATCH] =?UTF-8?q?feat(=E5=9B=BE=E8=A1=A8):=20=E6=A8=AA=E5=90=91?=
 =?UTF-8?q?=E6=9F=B1=E7=8A=B6=E5=9B=BE=E7=9A=84=E6=A8=AA=E8=BD=B4=E7=BB=B4?=
 =?UTF-8?q?=E5=BA=A6=E6=98=BE=E7=A4=BA=E5=AD=97=E7=AC=A6=E6=95=B0=E6=8E=A7?=
 =?UTF-8?q?=E5=88=B6=20#13161=20#12639?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 core/core-frontend/src/locales/en.ts          |  3 +-
 core/core-frontend/src/locales/tw.ts          |  3 +-
 core/core-frontend/src/locales/zh-CN.ts       |  3 +-
 .../src/models/chart/chart-style.d.ts         |  4 +
 .../editor-style/components/XAxisSelector.vue | 17 ++++
 .../editor-style/components/YAxisSelector.vue | 16 ++++
 .../chart/components/editor/util/chart.ts     |  6 +-
 .../js/panel/charts/bar/bidirectional-bar.ts  |  2 +
 .../js/panel/charts/bar/horizontal-bar.ts     |  2 +
 .../js/panel/charts/bar/progress-bar.ts       |  2 +
 .../js/panel/charts/bar/range-bar.ts          |  2 +
 .../js/panel/charts/bar/waterfall.ts          |  2 +
 .../components/js/panel/common/common_antv.ts | 88 +++++++++++++++++++
 13 files changed, 145 insertions(+), 5 deletions(-)

diff --git a/core/core-frontend/src/locales/en.ts b/core/core-frontend/src/locales/en.ts
index 134160112e..2d592f6fd4 100644
--- a/core/core-frontend/src/locales/en.ts
+++ b/core/core-frontend/src/locales/en.ts
@@ -1849,7 +1849,8 @@ Scatter chart (bubble) chart: {a} (series name), {b} (data name), {c} (value arr
     central_point: 'center point',
     full_display: 'full display',
     show_hover_style: 'show mouse hover style',
-    merge_cells: 'merge cells'
+    merge_cells: 'merge cells',
+    length_limit: 'length limit'
   },
   dataset: {
     scope_edit: 'only effective when editing',
diff --git a/core/core-frontend/src/locales/tw.ts b/core/core-frontend/src/locales/tw.ts
index 05604b38e0..9ec10d0581 100644
--- a/core/core-frontend/src/locales/tw.ts
+++ b/core/core-frontend/src/locales/tw.ts
@@ -1809,7 +1809,8 @@ export default {
     central_point: '中心點',
     full_display: '全量顯示',
     show_hover_style: '顯示滑鼠懸浮樣式',
-    merge_cells: '合併儲存格'
+    merge_cells: '合併儲存格',
+    length_limit: '長度限制'
   },
   dataset: {
     scope_edit: '僅編輯時生效',
diff --git a/core/core-frontend/src/locales/zh-CN.ts b/core/core-frontend/src/locales/zh-CN.ts
index 2b87351683..c8742a1064 100644
--- a/core/core-frontend/src/locales/zh-CN.ts
+++ b/core/core-frontend/src/locales/zh-CN.ts
@@ -1811,7 +1811,8 @@ export default {
     central_point: '中心点',
     full_display: '全量显示',
     show_hover_style: '显示鼠标悬浮样式',
-    merge_cells: '合并单元格'
+    merge_cells: '合并单元格',
+    length_limit: '长度限制'
   },
   dataset: {
     scope_edit: '仅编辑时生效',
diff --git a/core/core-frontend/src/models/chart/chart-style.d.ts b/core/core-frontend/src/models/chart/chart-style.d.ts
index 44aca1b55f..1cd45f2834 100644
--- a/core/core-frontend/src/models/chart/chart-style.d.ts
+++ b/core/core-frontend/src/models/chart/chart-style.d.ts
@@ -193,6 +193,10 @@ declare interface AxisLabel {
    * 格式化设置
    */
   formatter: string
+  /**
+   * 长度限制
+   */
+  lengthLimit: number
 }
 /**
  * 轴线条设置
diff --git a/core/core-frontend/src/views/chart/components/editor/editor-style/components/XAxisSelector.vue b/core/core-frontend/src/views/chart/components/editor/editor-style/components/XAxisSelector.vue
index 2291f57cbe..30a8db75bd 100644
--- a/core/core-frontend/src/views/chart/components/editor/editor-style/components/XAxisSelector.vue
+++ b/core/core-frontend/src/views/chart/components/editor/editor-style/components/XAxisSelector.vue
@@ -429,6 +429,23 @@ onMounted(() => {
         />
       </el-form-item>
 
+      <el-form-item
+        class="form-item"
+        :class="'form-item-' + themes"
+        :label="t('chart.length_limit')"
+        v-if="isBidirectionalBar"
+      >
+        <el-input-number
+          :disabled="!state.axisForm.axisLabel.show"
+          style="width: 100%"
+          :effect="props.themes"
+          v-model="state.axisForm.axisLabel.lengthLimit"
+          :min="1"
+          size="small"
+          controls-position="right"
+          @change="changeAxisStyle('axisLabel.lengthLimit')"
+        />
+      </el-form-item>
       <template v-if="showProperty('axisLabelFormatter') && !isBarRangeTime">
         <el-form-item
           class="form-item"
diff --git a/core/core-frontend/src/views/chart/components/editor/editor-style/components/YAxisSelector.vue b/core/core-frontend/src/views/chart/components/editor/editor-style/components/YAxisSelector.vue
index fbed259593..d75ae8989d 100644
--- a/core/core-frontend/src/views/chart/components/editor/editor-style/components/YAxisSelector.vue
+++ b/core/core-frontend/src/views/chart/components/editor/editor-style/components/YAxisSelector.vue
@@ -404,6 +404,22 @@ onMounted(() => {
             @change="changeAxisStyle('axisLabel.rotate')"
           />
         </el-form-item>
+        <el-form-item
+          class="form-item"
+          :class="'form-item-' + themes"
+          :label="t('chart.length_limit')"
+        >
+          <el-input-number
+            :disabled="!state.axisForm.axisLabel.show"
+            style="width: 100%"
+            :effect="props.themes"
+            v-model="state.axisForm.axisLabel.lengthLimit"
+            :min="1"
+            size="small"
+            controls-position="right"
+            @change="changeAxisStyle('axisLabel.lengthLimit')"
+          />
+        </el-form-item>
 
         <template v-if="showProperty('axisLabelFormatter')">
           <el-form-item
diff --git a/core/core-frontend/src/views/chart/components/editor/util/chart.ts b/core/core-frontend/src/views/chart/components/editor/util/chart.ts
index 44b993d6e3..56f706ae8b 100644
--- a/core/core-frontend/src/views/chart/components/editor/util/chart.ts
+++ b/core/core-frontend/src/views/chart/components/editor/util/chart.ts
@@ -573,7 +573,8 @@ export const DEFAULT_XAXIS_STYLE: ChartAxisStyle = {
     color: '#333333',
     fontSize: 12,
     rotate: 0,
-    formatter: '{value}'
+    formatter: '{value}',
+    lengthLimit: 10
   },
   axisLine: {
     show: true,
@@ -617,7 +618,8 @@ export const DEFAULT_YAXIS_STYLE: ChartAxisStyle = {
     color: '#333333',
     fontSize: 12,
     rotate: 0,
-    formatter: '{value}'
+    formatter: '{value}',
+    lengthLimit: 10
   },
   axisLine: {
     show: false,
diff --git a/core/core-frontend/src/views/chart/components/js/panel/charts/bar/bidirectional-bar.ts b/core/core-frontend/src/views/chart/components/js/panel/charts/bar/bidirectional-bar.ts
index 23d0f09c6b..cd0812d4f0 100644
--- a/core/core-frontend/src/views/chart/components/js/panel/charts/bar/bidirectional-bar.ts
+++ b/core/core-frontend/src/views/chart/components/js/panel/charts/bar/bidirectional-bar.ts
@@ -4,6 +4,7 @@ import {
 } from '@/views/chart/components/js/panel/types/impl/g2plot'
 import { cloneDeep, defaultTo, isEmpty, map } from 'lodash-es'
 import {
+  configAxisLabelLengthLimit,
   configPlotTooltipEvent,
   getPadding,
   getTooltipContainer,
@@ -175,6 +176,7 @@ export class BidirectionalHorizontalBar extends G2PlotChartView<
       }
     })
     configPlotTooltipEvent(chart, newChart)
+    configAxisLabelLengthLimit(chart, newChart)
     return newChart
   }
 
diff --git a/core/core-frontend/src/views/chart/components/js/panel/charts/bar/horizontal-bar.ts b/core/core-frontend/src/views/chart/components/js/panel/charts/bar/horizontal-bar.ts
index 815d8f42c4..8873d6d098 100644
--- a/core/core-frontend/src/views/chart/components/js/panel/charts/bar/horizontal-bar.ts
+++ b/core/core-frontend/src/views/chart/components/js/panel/charts/bar/horizontal-bar.ts
@@ -4,6 +4,7 @@ import {
 } from '@/views/chart/components/js/panel/types/impl/g2plot'
 import type { Bar, BarOptions } from '@antv/g2plot/esm/plots/bar'
 import {
+  configAxisLabelLengthLimit,
   configPlotTooltipEvent,
   getPadding,
   getTooltipContainer,
@@ -100,6 +101,7 @@ export class HorizontalBar extends G2PlotChartView<BarOptions, Bar> {
 
     newChart.on('interval:click', action)
     configPlotTooltipEvent(chart, newChart)
+    configAxisLabelLengthLimit(chart, newChart)
     return newChart
   }
 
diff --git a/core/core-frontend/src/views/chart/components/js/panel/charts/bar/progress-bar.ts b/core/core-frontend/src/views/chart/components/js/panel/charts/bar/progress-bar.ts
index a91503eb42..0e5db854b1 100644
--- a/core/core-frontend/src/views/chart/components/js/panel/charts/bar/progress-bar.ts
+++ b/core/core-frontend/src/views/chart/components/js/panel/charts/bar/progress-bar.ts
@@ -1,6 +1,7 @@
 import { G2PlotChartView, G2PlotDrawOptions } from '../../types/impl/g2plot'
 import { flow, hexColorToRGBA, parseJson } from '../../../util'
 import {
+  configAxisLabelLengthLimit,
   configPlotTooltipEvent,
   getTooltipContainer,
   setGradientColor,
@@ -140,6 +141,7 @@ export class ProgressBar extends G2PlotChartView<BarOptions, G2Progress> {
 
     newChart.on('interval:click', action)
     configPlotTooltipEvent(chart, newChart)
+    configAxisLabelLengthLimit(chart, newChart)
     return newChart
   }
   protected configBasicStyle(chart: Chart, options: BarOptions): BarOptions {
diff --git a/core/core-frontend/src/views/chart/components/js/panel/charts/bar/range-bar.ts b/core/core-frontend/src/views/chart/components/js/panel/charts/bar/range-bar.ts
index a3b982c228..d3a8b9818d 100644
--- a/core/core-frontend/src/views/chart/components/js/panel/charts/bar/range-bar.ts
+++ b/core/core-frontend/src/views/chart/components/js/panel/charts/bar/range-bar.ts
@@ -4,6 +4,7 @@ import {
 } from '@/views/chart/components/js/panel/types/impl/g2plot'
 import type { Bar, BarOptions } from '@antv/g2plot/esm/plots/bar'
 import {
+  configAxisLabelLengthLimit,
   configPlotTooltipEvent,
   getPadding,
   getTooltipContainer,
@@ -168,6 +169,7 @@ export class RangeBar extends G2PlotChartView<BarOptions, Bar> {
 
     newChart.on('interval:click', action)
     configPlotTooltipEvent(chart, newChart)
+    configAxisLabelLengthLimit(chart, newChart)
     return newChart
   }
 
diff --git a/core/core-frontend/src/views/chart/components/js/panel/charts/bar/waterfall.ts b/core/core-frontend/src/views/chart/components/js/panel/charts/bar/waterfall.ts
index 36ef5e0a89..dedf3d2008 100644
--- a/core/core-frontend/src/views/chart/components/js/panel/charts/bar/waterfall.ts
+++ b/core/core-frontend/src/views/chart/components/js/panel/charts/bar/waterfall.ts
@@ -3,6 +3,7 @@ import { G2PlotChartView, G2PlotDrawOptions } from '../../types/impl/g2plot'
 import { flow, hexColorToRGBA, parseJson } from '../../../util'
 import { valueFormatter } from '../../../formatter'
 import {
+  configAxisLabelLengthLimit,
   configPlotTooltipEvent,
   getPadding,
   getTooltipContainer,
@@ -100,6 +101,7 @@ export class Waterfall extends G2PlotChartView<WaterfallOptions, G2Waterfall> {
     const newChart = new G2Waterfall(container, options)
     newChart.on('interval:click', action)
     configPlotTooltipEvent(chart, newChart)
+    configAxisLabelLengthLimit(chart, newChart)
     return newChart
   }
 
diff --git a/core/core-frontend/src/views/chart/components/js/panel/common/common_antv.ts b/core/core-frontend/src/views/chart/components/js/panel/common/common_antv.ts
index 63543558bf..7f850edbc4 100644
--- a/core/core-frontend/src/views/chart/components/js/panel/common/common_antv.ts
+++ b/core/core-frontend/src/views/chart/components/js/panel/common/common_antv.ts
@@ -435,6 +435,11 @@ export function getXAxis(chart: Chart) {
                 fill: a.axisLabel.color,
                 fontSize: a.axisLabel.fontSize,
                 textAlign: textAlign
+              },
+              formatter: value => {
+                return chart.type === 'bidirectional-bar' && value.length > a.axisLabel.lengthLimit
+                  ? value.substring(0, a.axisLabel.lengthLimit) + '...'
+                  : value
               }
             }
           : null
@@ -533,6 +538,11 @@ export function getYAxis(chart: Chart) {
           fontSize: yAxis.axisLabel.fontSize,
           textBaseline,
           textAlign
+        },
+        formatter: value => {
+          return value.length > yAxis.axisLabel.lengthLimit
+            ? value.substring(0, yAxis.axisLabel.lengthLimit) + '...'
+            : value
         }
       }
     : null
@@ -1382,3 +1392,81 @@ export function getConditions(chart: Chart) {
   }
   return annotations
 }
+const AXIS_LABEL_TOOLTIP_STYLE = {
+  transition:
+    'left 0.4s cubic-bezier(0.23, 1, 0.32, 1) 0s, top 0.4s cubic-bezier(0.23, 1, 0.32, 1) 0s',
+  backgroundColor: 'rgb(255, 255, 255)',
+  boxShadow: 'rgb(174, 174, 174) 0px 0px 10px',
+  borderRadius: '3px',
+  padding: '8px 12px',
+  opacity: '0.95',
+  position: 'absolute',
+  visibility: 'visible'
+}
+const AXIS_LABEL_TOOLTIP_TPL =
+  '<div class="g2-axis-label-tooltip">' + '<div class="g2-tooltip-title">{title}</div>' + '</div>'
+export function configAxisLabelLengthLimit(chart, plot) {
+  const { customStyle } = parseJson(chart)
+  const { lengthLimit, fontSize, color, show } = customStyle.yAxis.axisLabel
+  if (!lengthLimit || !show || !customStyle.yAxis.show || chart.type === 'bidirectional-bar') {
+    return
+  }
+  plot.on('axis-label:mouseenter', e => {
+    const field = e.target.cfg.delegateObject.component.cfg.field
+    // 先只处理竖轴
+    if (field !== 'field' && field !== 'title') {
+      return
+    }
+    const realContent = e.target.attrs.text
+    if (realContent.length < lengthLimit || !(realContent?.slice(-3) === '...')) {
+      return
+    }
+    const { x, y } = e
+    const parentNode = e.event.target.parentNode
+    let labelTooltipDom = parentNode.getElementsByClassName('g2-axis-label-tooltip')?.[0]
+    if (!labelTooltipDom) {
+      const title = e.target.cfg.delegateObject.item.name
+      const domStr = substitute(AXIS_LABEL_TOOLTIP_TPL, { title })
+      labelTooltipDom = createDom(domStr)
+      _.assign(labelTooltipDom.style, AXIS_LABEL_TOOLTIP_STYLE)
+      parentNode.appendChild(labelTooltipDom)
+    } else {
+      labelTooltipDom.getElementsByClassName('g2-tooltip-title')[0].innerHTML =
+        e.target.cfg.delegateObject.item.name
+      labelTooltipDom.style.visibility = 'visible'
+    }
+    const { height, width } = parentNode.getBoundingClientRect()
+    const { offsetHeight, offsetWidth } = labelTooltipDom
+    if (offsetHeight > height || offsetWidth > width) {
+      labelTooltipDom.style.left = labelTooltipDom.style.top = `0px`
+      return
+    }
+    const initPosition = { left: x + 10, top: y + 15 }
+    if (initPosition.left + offsetWidth > width) {
+      initPosition.left = width - offsetWidth - 10
+    }
+    if (initPosition.top + offsetHeight > height) {
+      initPosition.top -= offsetHeight + 15
+    }
+    labelTooltipDom.style.left = `${initPosition.left}px`
+    labelTooltipDom.style.top = `${initPosition.top}px`
+    labelTooltipDom.style.color = color
+    labelTooltipDom.style.fontSize = `${fontSize}px`
+  })
+  plot.on('axis-label:mouseleave', e => {
+    const field = e.target.cfg.delegateObject.component.cfg.field
+    // 先只处理竖轴
+    if (field !== 'field' && field !== 'title') {
+      return
+    }
+    const realContent = e.target.attrs.text
+    if (realContent.length < lengthLimit || !(realContent?.slice(-3) === '...')) {
+      return
+    }
+    const parentNode = e.event.target.parentNode
+    const labelTooltipDom = parentNode.getElementsByClassName('g2-axis-label-tooltip')?.[0]
+    if (labelTooltipDom) {
+      labelTooltipDom.style.visibility = 'hidden'
+    }
+  })
+}