From 5fa1ddebc570ce984b8e1fb09927db4826dc3554 Mon Sep 17 00:00:00 2001
From: jianneng-fit2cloud <jianneng.pan@fit2cloud.com>
Date: Thu, 22 Aug 2024 17:05:02 +0800
Subject: [PATCH] =?UTF-8?q?fix(=E5=9B=BE=E8=A1=A8-=E7=83=AD=E5=8A=9B?=
 =?UTF-8?q?=E5=9B=BE):=20=E4=BF=AE=E5=A4=8D=E7=BC=96=E8=BE=91=E7=8A=B6?=
 =?UTF-8?q?=E6=80=81=E4=B8=8B=E8=B0=83=E6=95=B4=E5=AE=B9=E5=99=A8=E5=B0=BA?=
 =?UTF-8?q?=E5=AF=B8=EF=BC=8C=E6=B2=A1=E6=9C=89=E8=87=AA=E5=8A=A8=E5=88=B7?=
 =?UTF-8?q?=E6=96=B0=E5=A4=A7=E5=B0=8F=E7=9A=84=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../js/panel/charts/table/t-heatmap.ts        | 40 ++++++++++---------
 1 file changed, 22 insertions(+), 18 deletions(-)

diff --git a/core/core-frontend/src/views/chart/components/js/panel/charts/table/t-heatmap.ts b/core/core-frontend/src/views/chart/components/js/panel/charts/table/t-heatmap.ts
index 32942ca190..d34b99cfe2 100644
--- a/core/core-frontend/src/views/chart/components/js/panel/charts/table/t-heatmap.ts
+++ b/core/core-frontend/src/views/chart/components/js/panel/charts/table/t-heatmap.ts
@@ -72,7 +72,16 @@ export class TableHeatmap extends G2PlotChartView<HeatmapOptions, Heatmap> {
       limit: 1
     }
   }
-
+  protected getDefaultLength = (chart, l) => {
+    const containerDom = document.getElementById(chart.container)
+    const containerHeight = containerDom?.clientHeight || 100
+    const containerWidth = containerDom?.clientWidth || 100
+    let defaultLength = containerHeight - containerHeight * 0.5
+    if (l.orient !== 'vertical') {
+      defaultLength = containerWidth - containerWidth * 0.5
+    }
+    return defaultLength
+  }
   async drawChart(drawOptions: G2PlotDrawOptions<Heatmap>): Promise<Heatmap> {
     const { chart, container, action } = drawOptions
     const xAxis = deepCopy(chart.xAxis)
@@ -84,8 +93,6 @@ export class TableHeatmap extends G2PlotChartView<HeatmapOptions, Heatmap> {
     const xField = xAxis[0].dataeaseName
     const xFieldExt = xAxisExt[0].dataeaseName
     const extColorField = extColor[0].dataeaseName
-    const containerDom = document.getElementById(container)
-    const containerHeight = containerDom?.clientHeight || 100
     // data
     const data = cloneDeep(chart.data.tableRow)
     data.forEach(i => {
@@ -114,13 +121,13 @@ export class TableHeatmap extends G2PlotChartView<HeatmapOptions, Heatmap> {
         layout: 'vertical',
         position: 'right',
         slidable: true,
-        maxHeight: containerHeight - containerHeight * 0.2,
         label: {
           align: 'left',
           spacing: 10
         }
       }
     }
+    chart.container = container
     const options = this.setupOptions(chart, initOptions)
     const { Heatmap } = await import('@antv/g2plot/esm/plots/heatmap')
     const newChart = new Heatmap(container, options)
@@ -166,18 +173,10 @@ export class TableHeatmap extends G2PlotChartView<HeatmapOptions, Heatmap> {
     newChart.on('afterrender', ev => {
       const l = JSON.parse(JSON.stringify(parseJson(chart.customStyle).legend))
       if (l.show) {
-        const extColor = deepCopy(chart.extColor)
-        const containerDom = document.getElementById(container)
-        const containerHeight = containerDom?.clientHeight || 100
-        const containerWidth = containerDom?.clientWidth || 100
-        let defaultLength = getLegend(chart)
-        if (l.orient === 'vertical') {
-          defaultLength = containerHeight - containerHeight * 0.5
-        } else {
-          defaultLength = containerWidth - containerWidth * 0.5
+        const rail = ev.view.getController('legend').option[extColor[0].dataeaseName]?.['rail']
+        if (rail) {
+          rail.defaultLength = this.getDefaultLength(chart, l)
         }
-        ev.view.getController('legend').option[extColor[0].dataeaseName]['rail'].defaultLength =
-          defaultLength
       }
     })
     return newChart
@@ -251,12 +250,16 @@ export class TableHeatmap extends G2PlotChartView<HeatmapOptions, Heatmap> {
       tmpOptions.legend.minWidth = 10
       tmpOptions.legend.maxHeight = 600
       tmpOptions.legend.maxWidth = 600
+      const containerDom = document.getElementById(chart.container)
+      const containerHeight = containerDom?.clientHeight || 100
+      const containerWidth = containerDom?.clientWidth || 100
+      let defaultLength = containerHeight - containerHeight * 0.5
       if (l.orient === 'vertical') {
         tmpOptions.legend.offsetY = -5
+      } else {
+        defaultLength = containerWidth - containerWidth * 0.5
       }
-      tmpOptions.legend.rail = {
-        defaultLength: 100
-      }
+      tmpOptions.legend.rail = { defaultLength: defaultLength }
       tmpOptions.legend.label = {
         spacing: 10,
         style: {
@@ -272,6 +275,7 @@ export class TableHeatmap extends G2PlotChartView<HeatmapOptions, Heatmap> {
     chart.customStyle.legend.orient = 'vertical'
     chart.customStyle.legend.vPosition = 'center'
     chart.customStyle.legend.hPosition = 'right'
+    chart.customStyle.legend.rail = { defaultLength: 100 }
     return chart
   }