From 6dbab85cc14055821fc7ca2fbd2e843e753a793f Mon Sep 17 00:00:00 2001
From: jianneng-fit2cloud <jianneng.pan@fit2cloud.com>
Date: Thu, 25 Apr 2024 13:01:16 +0800
Subject: [PATCH] =?UTF-8?q?feat(=E5=9B=BE=E8=A1=A8-=E8=B1=A1=E9=99=90?=
 =?UTF-8?q?=E5=9B=BE):=20=E6=94=AF=E6=8C=81=E5=8F=AF=E8=87=AA=E5=AE=9A?=
 =?UTF-8?q?=E4=B9=89=E8=AE=BE=E7=BD=AE=E8=BD=B4=E6=81=92=E7=BA=BF=E7=9A=84?=
 =?UTF-8?q?=E4=BD=8D=E7=BD=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/models/chart/chart-attr.d.ts          |  2 +
 .../components/QuadrantSelector.vue           | 49 ++++++++++++++++++-
 .../js/panel/charts/others/quadrant.ts        | 49 +++++++++++--------
 .../components/js/panel/types/impl/g2plot.ts  |  5 ++
 .../views/components/ChartComponentG2Plot.vue | 10 ++--
 5 files changed, 90 insertions(+), 25 deletions(-)

diff --git a/core/core-frontend/src/models/chart/chart-attr.d.ts b/core/core-frontend/src/models/chart/chart-attr.d.ts
index 77065335b0..cd2f745c11 100644
--- a/core/core-frontend/src/models/chart/chart-attr.d.ts
+++ b/core/core-frontend/src/models/chart/chart-attr.d.ts
@@ -710,6 +710,8 @@ declare interface MapCfg {
  * 象限属性
  */
 declare interface QuadrantAttr {
+  xBaseline?: number
+  yBaseline?: number
   lineStyle: QuadrantLineStyle
   regionStyle: QuadrantCommonStyle[]
   labels: QuadrantLabelConf[]
diff --git a/core/core-frontend/src/views/chart/components/editor/editor-style/components/QuadrantSelector.vue b/core/core-frontend/src/views/chart/components/editor/editor-style/components/QuadrantSelector.vue
index 0ca30cc76b..aa1e548edc 100644
--- a/core/core-frontend/src/views/chart/components/editor/editor-style/components/QuadrantSelector.vue
+++ b/core/core-frontend/src/views/chart/components/editor/editor-style/components/QuadrantSelector.vue
@@ -1,8 +1,13 @@
 <script lang="tsx" setup>
-import { computed, onMounted, PropType, reactive, watch } from 'vue'
+import { computed, inject, onMounted, PropType, reactive, ref, watch } from 'vue'
 import { useI18n } from '@/hooks/web/useI18n'
 import { COLOR_PANEL, DEFAULT_QUADRANT_STYLE } from '@/views/chart/components/editor/util/chart'
-
+import { useEmitt } from '@/hooks/web/useEmitt'
+useEmitt({
+  name: 'quadrant-default-baseline',
+  callback: args => quadrantDefaultBaseline(args)
+})
+const quotaData = ref<Axis[]>(inject('quotaData'))
 const { t } = useI18n()
 
 const props = defineProps({
@@ -63,6 +68,10 @@ const fillOpacityList = computed(() => {
 const changeStyle = () => {
   emit('onChangeQuadrantForm', state.quadrantForm)
 }
+const quadrantDefaultBaseline = quadrant => {
+  state.quadrantForm.xBaseline = quadrant.xBaseline
+  state.quadrantForm.yBaseline = quadrant.yBaseline
+}
 
 const init = () => {
   const chart = JSON.parse(JSON.stringify(props.chart))
@@ -136,6 +145,42 @@ onMounted(() => {
           </el-tooltip>
         </el-form-item>
       </div>
+      <div style="display: flex">
+        <el-form-item
+          class="form-item"
+          label="X 轴恒线"
+          :class="'form-item-' + themes"
+          style="padding-left: 4px"
+        >
+          <el-input-number
+            controls-position="right"
+            style="width: 100%"
+            :effect="props.themes"
+            v-model="state.quadrantForm.xBaseline"
+            :precision="0"
+            :min="0"
+            size="small"
+            @change="changeStyle()"
+          />
+        </el-form-item>
+        <el-form-item
+          class="form-item"
+          label="Y 轴恒线"
+          :class="'form-item-' + themes"
+          style="padding-left: 4px"
+        >
+          <el-input-number
+            controls-position="right"
+            style="width: 100%"
+            :effect="props.themes"
+            v-model="state.quadrantForm.yBaseline"
+            :precision="0"
+            :min="0"
+            size="small"
+            @change="changeStyle()"
+          />
+        </el-form-item>
+      </div>
     </template>
     <div
       v-for="(l, index) in state.quadrantForm.labels"
diff --git a/core/core-frontend/src/views/chart/components/js/panel/charts/others/quadrant.ts b/core/core-frontend/src/views/chart/components/js/panel/charts/others/quadrant.ts
index ffb77ce3c0..418c3853c7 100644
--- a/core/core-frontend/src/views/chart/components/js/panel/charts/others/quadrant.ts
+++ b/core/core-frontend/src/views/chart/components/js/panel/charts/others/quadrant.ts
@@ -7,7 +7,6 @@ import { flow, parseJson } from '../../../util'
 import { valueFormatter } from '../../../formatter'
 import { useI18n } from '@/hooks/web/useI18n'
 import { isEmpty } from 'lodash-es'
-import { Datum } from '@antv/g2plot/esm/types/common'
 import { DEFAULT_QUADRANT_STYLE } from '@/views/chart/components/editor/util/chart'
 
 const { t } = useI18n()
@@ -31,7 +30,7 @@ export class Quadrant extends G2PlotChartView<ScatterOptions, G2Scatter> {
   ]
   propertyInner: EditorPropertyInner = {
     'basic-style-selector': ['colors', 'alpha', 'scatterSymbol', 'scatterSymbolSize'],
-    'label-selector': ['fontSize', 'color', 'labelFormatter'],
+    'label-selector': ['fontSize', 'color'],
     'tooltip-selector': ['fontSize', 'color', 'backgroundColor', 'seriesTooltipFormatter'],
     'x-axis-selector': [
       'position',
@@ -118,7 +117,7 @@ export class Quadrant extends G2PlotChartView<ScatterOptions, G2Scatter> {
   }
 
   public drawChart(drawOptions: G2PlotDrawOptions<G2Scatter>) {
-    const { chart, container, action } = drawOptions
+    const { chart, container, action, quadrantDefaultBaseline } = drawOptions
     if (!chart.data?.data) {
       return
     }
@@ -167,21 +166,33 @@ export class Quadrant extends G2PlotChartView<ScatterOptions, G2Scatter> {
       }
       data.push(tmpData)
     }
-    chart.customAttr['quadrant'].xBaseline = (
+    // x轴基准线 默认值
+    const xBaseline = (
       data.reduce((valueSoFar, currentItem) => {
-        return valueSoFar + currentItem[xFieldObj.name]
-      }, 0) / data.length
+        return Math.max(valueSoFar, currentItem[xFieldObj.name])
+      }, 0) / 2
     ).toFixed()
-    chart.customAttr['quadrant'].yBaseline = (
+    // y轴基准线 默认值
+    const yBaseline = (
       data.reduce((valueSoFar, currentItem) => {
-        return valueSoFar + currentItem[yFieldObj.name]
-      }, 0) / data.length
+        return Math.max(valueSoFar, currentItem[yFieldObj.name])
+      }, 0) / 2
     ).toFixed()
+    const defaultBaselineQuadrant = {
+      ...chart.customAttr['quadrant']
+    }
+    // 新建图表
+    if (!defaultBaselineQuadrant.xBaseline) {
+      // 默认基准线值
+      defaultBaselineQuadrant.xBaseline = xBaseline
+      defaultBaselineQuadrant.yBaseline = yBaseline
+    }
     const colorField = colorFieldObj.name ? { colorField: colorFieldObj.name } : {}
-    const quadrant = chart.customAttr['quadrant'] ? { quadrant: chart.customAttr['quadrant'] } : {}
     const baseOptions: ScatterOptions = {
       ...colorField,
-      ...quadrant,
+      quadrant: {
+        ...defaultBaselineQuadrant
+      },
       data: data,
       xField: xFieldObj.name,
       yField: yFieldObj.name,
@@ -195,6 +206,7 @@ export class Quadrant extends G2PlotChartView<ScatterOptions, G2Scatter> {
     const options = this.setupOptions(chart, baseOptions)
     const newChart = new G2Scatter(container, options)
     newChart.on('point:click', action)
+    newChart.on('click', () => quadrantDefaultBaseline(defaultBaselineQuadrant))
     return newChart
   }
 
@@ -205,7 +217,7 @@ export class Quadrant extends G2PlotChartView<ScatterOptions, G2Scatter> {
     if (chart.extBubble?.length) {
       return {
         ...options,
-        size: [5, 30],
+        size: [4, 30],
         sizeField: extBubbleObj.name,
         shape: basicStyle.scatterSymbol
       }
@@ -283,18 +295,15 @@ export class Quadrant extends G2PlotChartView<ScatterOptions, G2Scatter> {
         const l = customAttr.label
         if (l.show) {
           label = {
-            position: l.position,
-            offsetY: 5,
+            offset: 0,
             style: {
               fill: l.color,
               fontSize: l.fontSize
             },
-            formatter: function (param: Datum, item) {
-              const text = String(param[chart.xAxis[0]?.['originName']])
-              const radius = item.size
-              const textWidth = text.length * 10
-              return textWidth > 2 * radius ? '' : param[chart.xAxis[0]?.['originName']]
-            }
+            content: datum => {
+              return datum[chart.xAxis[0]?.['originName']]
+            },
+            layout: [{ type: 'limit-in-shape' }]
           }
         } else {
           label = false
diff --git a/core/core-frontend/src/views/chart/components/js/panel/types/impl/g2plot.ts b/core/core-frontend/src/views/chart/components/js/panel/types/impl/g2plot.ts
index 8df2fff532..9aa63414e8 100644
--- a/core/core-frontend/src/views/chart/components/js/panel/types/impl/g2plot.ts
+++ b/core/core-frontend/src/views/chart/components/js/panel/types/impl/g2plot.ts
@@ -25,6 +25,11 @@ export interface G2PlotDrawOptions<O> extends AntVDrawOptions<O> {
    * 缩放比例
    */
   scale?: number
+  /**
+   * 特殊处理，象限图设置分割线的默认值
+   * @param args
+   */
+  quadrantDefaultBaseline?: (...args: any) => void
 }
 
 /**
diff --git a/core/core-frontend/src/views/chart/components/views/components/ChartComponentG2Plot.vue b/core/core-frontend/src/views/chart/components/views/components/ChartComponentG2Plot.vue
index 641e0b8756..04ae228425 100644
--- a/core/core-frontend/src/views/chart/components/views/components/ChartComponentG2Plot.vue
+++ b/core/core-frontend/src/views/chart/components/views/components/ChartComponentG2Plot.vue
@@ -16,10 +16,11 @@ import { BASE_VIEW_CONFIG } from '../../editor/util/chart'
 import { customAttrTrans, customStyleTrans, recursionTransObj } from '@/utils/canvasStyle'
 import { deepCopy } from '@/utils/utils'
 import { trackBarStyleCheck } from '@/utils/canvasUtils'
+import { useEmitt } from '@/hooks/web/useEmitt'
 
 const dvMainStore = dvMainStoreWithOut()
 const { nowPanelTrackInfo, nowPanelJumpInfo, mobileInPc } = storeToRefs(dvMainStore)
-
+const { emitter } = useEmitt()
 const props = defineProps({
   element: {
     type: Object,
@@ -149,7 +150,8 @@ const renderG2Plot = (chart, chartView: G2PlotChartView<any, any>) => {
     container: containerId,
     chart: chart,
     scale: 1,
-    action
+    action,
+    quadrantDefaultBaseline
   })
   myChart?.render()
 }
@@ -296,7 +298,9 @@ const trackMenu = computed(() => {
   }
   return trackMenuInfo
 })
-
+const quadrantDefaultBaseline = defualtQuadrant => {
+  emitter.emit('quadrant-default-baseline', defualtQuadrant)
+}
 defineExpose({
   calcData,
   renderChart,