From 32e61169afa743599d2d204a31a76c545dc3aea6 Mon Sep 17 00:00:00 2001
From: dataeaseShu <tong.shu@fit2cloud.com>
Date: Wed, 10 Jul 2024 14:19:07 +0800
Subject: [PATCH] =?UTF-8?q?feat(=E7=B3=BB=E7=BB=9F=E8=AE=BE=E7=BD=AE):=20D?=
 =?UTF-8?q?ataEase=20Copilot=E9=9C=80=E6=B1=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/assets/svg/chart-bar.svg              |   3 -
 .../src/assets/svg/chart_pie.svg              |   1 -
 .../src/assets/svg/icon_chart-line-c.svg      |   4 +
 .../assets/svg/icon_dashboard_outlined-c.svg  |   3 +
 .../src/assets/svg/icon_pie_outlined-c.svg    |   4 +
 .../src/views/copilot/DialogueChart.vue       | 210 +++++++++++++-----
 .../core-frontend/src/views/copilot/index.vue |   9 +-
 7 files changed, 172 insertions(+), 62 deletions(-)
 delete mode 100644 core/core-frontend/src/assets/svg/chart-bar.svg
 delete mode 100644 core/core-frontend/src/assets/svg/chart_pie.svg
 create mode 100644 core/core-frontend/src/assets/svg/icon_chart-line-c.svg
 create mode 100644 core/core-frontend/src/assets/svg/icon_dashboard_outlined-c.svg
 create mode 100644 core/core-frontend/src/assets/svg/icon_pie_outlined-c.svg

diff --git a/core/core-frontend/src/assets/svg/chart-bar.svg b/core/core-frontend/src/assets/svg/chart-bar.svg
deleted file mode 100644
index 97f62c8b42..0000000000
--- a/core/core-frontend/src/assets/svg/chart-bar.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M5.66668 17.3333V11.697C5.66668 11.312 5.98648 11 6.38097 11H9.33335V6.03508C9.33335 5.64751 9.67446 5.33333 10.0953 5.33333H13.9048C14.3256 5.33333 14.6667 5.64751 14.6667 6.03508V9.33333H17.6191C18.0136 9.33333 18.3333 9.63181 18.3333 10V17.3333H18.9999C19.184 17.3333 19.3332 17.4826 19.3332 17.6667V18.3333C19.3332 18.5174 19.184 18.6667 18.9999 18.6667H4.9999C4.8158 18.6667 4.66656 18.5174 4.66656 18.3333V17.6667C4.66656 17.4826 4.8158 17.3333 4.9999 17.3333H5.66668ZM17 17.3333V10.6667H14.6667V17.3333H17ZM13.3333 17.3333V6.66666H10.6667V17.3333H13.3333ZM9.33335 17.3333V12.3333H7.00001V17.3333H9.33335Z" fill="#646A73"/>
-</svg>
diff --git a/core/core-frontend/src/assets/svg/chart_pie.svg b/core/core-frontend/src/assets/svg/chart_pie.svg
deleted file mode 100644
index f672df970d..0000000000
--- a/core/core-frontend/src/assets/svg/chart_pie.svg
+++ /dev/null
@@ -1 +0,0 @@
-<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1682490644818" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2678" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M512 106.666667C288.213333 106.666667 106.666667 288.213333 106.666667 512s181.546667 405.333333 405.333333 405.333333 405.333333-181.546667 405.333333-405.333333H512V106.666667z" fill="#2953FF" p-id="2679"></path><path d="M798.72 225.28a404.522667 404.522667 0 0 0-249.813333-116.906667v366.72h366.72c-8.32-91.093333-47.146667-179.84-116.906667-249.813333z" fill="#FCCA1E" p-id="2680"></path></svg>
\ No newline at end of file
diff --git a/core/core-frontend/src/assets/svg/icon_chart-line-c.svg b/core/core-frontend/src/assets/svg/icon_chart-line-c.svg
new file mode 100644
index 0000000000..6afc7dc5e4
--- /dev/null
+++ b/core/core-frontend/src/assets/svg/icon_chart-line-c.svg
@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24"  xmlns="http://www.w3.org/2000/svg">
+<path d="M0.713135 21.4739V1.80273C0.713135 1.52659 0.936992 1.30273 1.21313 1.30273H2.26008C2.53623 1.30273 2.76008 1.52659 2.76008 1.80273V20.5523H22.5686C22.8447 20.5523 23.0686 20.7761 23.0686 21.0523V22.0992C23.0686 22.3754 22.8447 22.5992 22.5686 22.5992H1.83907C1.54045 22.5992 1.25407 22.4806 1.04291 22.2694C0.83176 22.0583 0.713135 21.7725 0.713135 21.4739Z" />
+<path d="M4.19544 18.3911C3.96872 18.2313 3.91539 17.9175 4.07659 17.6918L8.90155 10.9358C8.97757 10.8235 9.07516 10.7274 9.18865 10.6531C9.30213 10.5788 9.42925 10.5278 9.56262 10.5031C9.69599 10.4784 9.83293 10.4804 9.96551 10.5091C10.0981 10.5377 10.2236 10.5925 10.3349 10.6701L15.7191 14.2624L20.9481 8.16625C21.1291 7.95528 21.4474 7.93239 21.6567 8.11531L22.4497 8.80844C22.6562 8.98892 22.6788 9.30208 22.5003 9.51031L16.6806 16.2998C16.5179 16.4883 16.2919 16.611 16.0452 16.6449C15.7984 16.6788 15.5478 16.6215 15.3402 16.4839L10.0275 12.9315L5.77196 18.8941C5.61221 19.118 5.30171 19.1708 5.07694 19.0124L4.19544 18.3911Z" />
+</svg>
diff --git a/core/core-frontend/src/assets/svg/icon_dashboard_outlined-c.svg b/core/core-frontend/src/assets/svg/icon_dashboard_outlined-c.svg
new file mode 100644
index 0000000000..630be3d85d
--- /dev/null
+++ b/core/core-frontend/src/assets/svg/icon_dashboard_outlined-c.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24"  xmlns="http://www.w3.org/2000/svg">
+<path d="M2.49993 20V11.5455C2.49993 10.9681 2.97962 10.5 3.57136 10.5H7.99993V3.05263C7.99993 2.47128 8.5116 2 9.14279 2H14.8571C15.4883 2 15.9999 2.47128 15.9999 3.05263V8H20.4285C21.0202 8 21.4999 8.44772 21.4999 9V20H22.4998C22.7759 20 22.9998 20.2239 22.9998 20.5V21.5C22.9998 21.7761 22.7759 22 22.4998 22H1.49976C1.22361 22 0.999756 21.7761 0.999756 21.5V20.5C0.999756 20.2239 1.22361 20 1.49976 20H2.49993ZM19.4999 20V10H15.9999V20H19.4999ZM13.9999 20V4H9.99993V20H13.9999ZM7.99993 20V12.5H4.49993V20H7.99993Z" />
+</svg>
diff --git a/core/core-frontend/src/assets/svg/icon_pie_outlined-c.svg b/core/core-frontend/src/assets/svg/icon_pie_outlined-c.svg
new file mode 100644
index 0000000000..898dd65f1a
--- /dev/null
+++ b/core/core-frontend/src/assets/svg/icon_pie_outlined-c.svg
@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24"  xmlns="http://www.w3.org/2000/svg">
+<path d="M12.0001 21.3333C17.1547 21.3333 21.3334 17.1547 21.3334 12C18.2223 12 15.1112 12 12.0001 12C12.0001 8.26667 12.0001 5.15556 12.0001 2.66667C6.84542 2.66667 2.66675 6.84534 2.66675 12C2.66675 17.1547 6.84542 21.3333 12.0001 21.3333ZM10.1667 12.7667C10.1667 13.3558 10.6443 13.8333 11.2334 13.8333H19.3334C18.5064 17.0465 15.4714 19.3333 12.0001 19.3333C7.88571 19.3333 4.66675 15.9961 4.66675 11.8817C4.66675 8.41043 6.95363 5.49367 10.1667 4.66667V12.7667Z" />
+<path d="M14.8939 10C14.4002 10 14.0001 9.59984 14.0001 9.10621V2C18.2227 2.41925 21.5808 5.77735 22.0001 10H14.8939ZM16.0001 4.66667V8H19.3334C18.721 6.4875 17.5126 5.27905 16.0001 4.66667Z" />
+</svg>
diff --git a/core/core-frontend/src/views/copilot/DialogueChart.vue b/core/core-frontend/src/views/copilot/DialogueChart.vue
index 6a7efe8620..2e66d453a5 100644
--- a/core/core-frontend/src/views/copilot/DialogueChart.vue
+++ b/core/core-frontend/src/views/copilot/DialogueChart.vue
@@ -1,6 +1,7 @@
 <script lang="ts" setup>
 import { PropType, computed, onMounted, shallowRef, ref, nextTick } from 'vue'
-import { Column, Line } from '@antv/g2plot'
+import { Column, Line, Pie } from '@antv/g2plot'
+import { useElementSize } from '@vueuse/core'
 import { downloadCanvas } from '@/utils/imgUtils'
 import ExcelJS from 'exceljs'
 interface Copilot {
@@ -37,22 +38,35 @@ const props = defineProps({
 const content = ref()
 const chartTypeList = ref()
 let columnPlot = null
+const chartRef = ref()
+const { width } = useElementSize(chartRef)
 onMounted(() => {
   const { chart, msgType, msgStatus, chartData, id } = props.copilotInfo
   if (msgStatus === 1 && msgType === 'api' && chartData) {
     if (['bar', 'line'].includes(chart.type)) {
-      isLine.value = chart.type === 'line'
+      activeCommand.value = chart.type
       const chartType = chart.type === 'bar' ? Column : Line
       columnPlot = new chartType(`de-${id}-ed`, {
         data: chartData.data.data,
-        xField: chart.axis.x,
-        yField: chart.axis.y,
+        xField: chart.axis?.x,
+        yField: chart.axis?.y,
         legend: {
           layout: 'horizontal',
           position: 'left'
         }
       })
       columnPlot.render()
+    } else if (chart.type === 'pie') {
+      activeCommand.value = chart.type
+      columnPlot = new Pie(`de-${id}-ed`, {
+        appendPadding: 10,
+        data: chartData.data.data,
+        angleField: chart.axis?.y,
+        colorField: chart.axis?.x,
+        radius: 0.9,
+        interactions: [{ type: 'element-active' }]
+      })
+      columnPlot.render()
     } else {
       columns.value = chartData.data.fields.map(_ => ({
         key: `${_.originName}`,
@@ -104,43 +118,71 @@ const exportExcel = () => {
   })
 }
 const renderTableLocal = ref(false)
+const changeChartType = () => {
+  switchChartType(activeCommand.value)
+}
 const switchChartType = type => {
-  columnPlot?.destroy()
-  isLine.value = type === 'line'
-  const { chart, msgType, msgStatus, chartData, id } = props.copilotInfo
   renderTableLocal.value = false
-  if (msgStatus === 1 && msgType === 'api' && chartData) {
-    if (['bar', 'line'].includes(type)) {
-      const chartType = type === 'bar' ? Column : Line
-      const columnPlot = new chartType(`de-${id}-ed`, {
-        data: chartData.data.data,
-        xField: chart.axis.x,
-        yField: chart.axis.y,
-        legend: {
-          layout: 'horizontal',
-          position: 'left'
-        }
-      })
-      columnPlot.render()
-      return
+  nextTick(() => {
+    if (columnPlot?.chart && !columnPlot.chart.wrapperElement) {
+      columnPlot.chart.wrapperElement = document.querySelector(
+        `#de-${props.copilotInfo.id}-ed > div`
+      )
     }
 
-    columns.value = chartData.data.fields.map(_ => ({
-      key: `${_.originName}`,
-      dataKey: `${_.originName}`,
-      title: `${_.originName}`,
-      width: 150
-    }))
-
-    data.value = chartData.data.data.map((ele, index) => {
-      return {
-        ...ele,
-        id: index + 'row'
+    if (columnPlot?.chart?.wrapperElement) {
+      columnPlot.destroy()
+    }
+    if (['bar', 'line', 'pie'].includes(type)) {
+      activeCommand.value = type
+    }
+    const { chart, msgType, msgStatus, chartData, id } = props.copilotInfo
+    if (msgStatus === 1 && msgType === 'api' && chartData) {
+      if (['bar', 'line'].includes(type)) {
+        const chartType = type === 'bar' ? Column : Line
+        const columnPlot = new chartType(`de-${id}-ed`, {
+          data: chartData.data.data,
+          xField: chart.axis?.x,
+          yField: chart.axis?.y,
+          legend: {
+            layout: 'horizontal',
+            position: 'left'
+          }
+        })
+        columnPlot.render()
+        return
       }
-    })
 
-    renderTableLocal.value = true
-  }
+      if (type === 'pie') {
+        columnPlot = new Pie(`de-${id}-ed`, {
+          appendPadding: 10,
+          data: chartData.data.data,
+          angleField: chart.axis?.y,
+          colorField: chart.axis?.x,
+          radius: 0.9,
+          interactions: [{ type: 'element-active' }]
+        })
+        columnPlot.render()
+        return
+      }
+
+      columns.value = chartData.data.fields.map(_ => ({
+        key: `${_.originName}`,
+        dataKey: `${_.originName}`,
+        title: `${_.originName}`,
+        width: 150
+      }))
+
+      data.value = chartData.data.data.map((ele, index) => {
+        return {
+          ...ele,
+          id: index + 'row'
+        }
+      })
+
+      renderTableLocal.value = true
+    }
+  })
 }
 const chartTypeRef = ref()
 const downloadChart = () => {
@@ -154,11 +196,30 @@ const downloadChart = () => {
 const renderTable = computed(() => {
   const { chart, msgType, msgStatus, chartData } = props.copilotInfo
   return (
-    msgType === 'api' && msgStatus === 1 && !['bar', 'line'].includes(chart?.type) && chartData.data
+    msgType === 'api' &&
+    msgStatus === 1 &&
+    !['bar', 'line', 'pie'].includes(chart?.type) &&
+    chartData.data
   )
 })
-
-const isLine = ref(false)
+const activeCommand = ref('')
+const curTypeList = [
+  {
+    label: '折线图',
+    value: 'line',
+    icon: 'icon_chart-line-c'
+  },
+  {
+    label: '柱状图',
+    icon: 'icon_dashboard_outlined-c',
+    value: 'bar'
+  },
+  {
+    label: '饼图',
+    icon: 'icon_pie_outlined-c',
+    value: 'pie'
+  }
+]
 
 const columns = shallowRef([])
 const data = shallowRef([])
@@ -204,12 +265,12 @@ const tips = computed(() => {
         class="chart-type"
         ref="chartTypeRef"
       >
-        <div class="column-plot_de" :id="`de-${copilotInfo.id}-ed`">
+        <div ref="chartRef" class="column-plot_de" :id="`de-${copilotInfo.id}-ed`">
           <el-table-v2
             v-if="renderTable || renderTableLocal"
             :columns="columns"
             :data="data"
-            :width="718"
+            :width="width"
             :height="335"
             fixed
           />
@@ -222,28 +283,34 @@ const tips = computed(() => {
       class="chart-type_list"
       v-if="copilotInfo.msgType === 'api' && copilotInfo.msgStatus === 1"
     >
-      <el-tooltip effect="dark" content="切换至柱状图" placement="top">
-        <el-icon v-show="isLine" @click="switchChartType('bar')">
-          <Icon name="chart-bar" />
+      <template v-if="!renderTable">
+        <el-icon v-if="activeCommand" class="select-prefix">
+          <Icon :name="curTypeList.find(ele => ele.value === activeCommand).icon" />
         </el-icon>
-      </el-tooltip>
-
-      <el-tooltip effect="dark" content="切换至折线图" placement="top">
-        <el-icon style="font-size: 16px" v-show="!isLine" @click="switchChartType('line')">
-          <Icon name="icon_chart-line" />
-        </el-icon>
-      </el-tooltip>
-
-      <el-divider direction="vertical" />
+        <el-select
+          popper-class="copilot-select_popper"
+          class="select-copilot-list"
+          v-model="activeCommand"
+          size="small"
+          @change="changeChartType"
+        >
+          <el-option
+            v-for="item in curTypeList"
+            :key="item.label"
+            :label="item.label"
+            :value="item.value"
+          />
+        </el-select>
+        <el-divider direction="vertical" />
+      </template>
       <el-tooltip effect="dark" content="切换至明细表" placement="top">
-        <el-icon @click="switchChartType('table')">
+        <el-icon class="ed-icon_chart" @click="switchChartType('table')">
           <Icon name="chart-table" />
         </el-icon>
       </el-tooltip>
-
       <el-divider direction="vertical" />
       <el-tooltip effect="dark" content="下载" placement="top">
-        <el-icon @click="downloadChart">
+        <el-icon class="ed-icon_chart" @click="downloadChart">
           <Icon name="chart-download" />
         </el-icon>
       </el-tooltip>
@@ -257,6 +324,21 @@ const tips = computed(() => {
   margin-top: 24px;
   position: relative;
 
+  .select-copilot-list {
+    width: 40px;
+    position: relative;
+    z-index: 100;
+
+    :deep(.ed-input__wrapper) {
+      background: #3370ff1a;
+      box-shadow: none !important;
+      padding-right: 4px;
+      .ed-input__inner {
+        visibility: hidden;
+      }
+    }
+  }
+
   .chart-type_list {
     position: absolute;
     bottom: -36px;
@@ -264,7 +346,7 @@ const tips = computed(() => {
     display: flex;
     align-items: center;
     font-size: 24px;
-    .ed-icon {
+    .ed-icon_chart {
       position: relative;
       cursor: pointer;
       &::after {
@@ -286,6 +368,15 @@ const tips = computed(() => {
         }
       }
     }
+
+    .select-prefix {
+      position: absolute;
+      left: 4px;
+      top: 50%;
+      transform: translateY(-50%);
+      font-size: 16px;
+      color: var(--ed-color-primary, #3370ff);
+    }
     .ed-divider--vertical {
       border-color: #1f232926;
       height: 14px;
@@ -311,7 +402,7 @@ const tips = computed(() => {
   }
 
   .column-plot_de {
-    width: 718px;
+    width: calc(100% - 32px);
     height: 335px;
   }
 
@@ -365,3 +456,8 @@ const tips = computed(() => {
   }
 }
 </style>
+<style lang="less">
+.copilot-select_popper {
+  width: 128px;
+}
+</style>
diff --git a/core/core-frontend/src/views/copilot/index.vue b/core/core-frontend/src/views/copilot/index.vue
index 4dc1eaf488..936d5ccc79 100644
--- a/core/core-frontend/src/views/copilot/index.vue
+++ b/core/core-frontend/src/views/copilot/index.vue
@@ -78,7 +78,10 @@ const handleDatasetChange = () => {
       oldId = datasetId.value
       oldName = treeSelectRef.value.getCurrentNode().name
       getOptions(datasetId.value)
-      clearAllCopilot()
+      clearAllCopilot().then(() => {
+        historyArr.value = []
+        historyBack = []
+      })
     })
   } else {
     oldId = datasetId.value
@@ -97,6 +100,10 @@ let historyBack = []
 getListCopilot().then(res => {
   historyBack = (res as unknown as string[]) || []
   historyArr.value = cloneDeep(historyBack)
+  if (!!historyBack.length) {
+    datasetId.value = historyBack[0].datasetGroupId
+    datasetId.value && getOptions(datasetId.value)
+  }
 })
 const questionInputRef = ref()
 const overHeight = ref(false)