From cd7218f3d54780b8b9cf833f7906662e5f851e87 Mon Sep 17 00:00:00 2001
From: zyh <zhuyanheng@geedgenetworks.com>
Date: Fri, 22 Sep 2023 17:55:44 +0800
Subject: [PATCH 1/3] =?UTF-8?q?NEZ-3204=20feat=EF=BC=9Adashboard=20chart?=
 =?UTF-8?q?=20tooltip=E5=A2=9E=E5=8A=A0=E5=A4=8D=E5=88=B6=E8=A1=A8?=
 =?UTF-8?q?=E8=BE=BE=E5=BC=8F=E6=8C=89=E9=92=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/chart/chart/chartBar.vue     | 12 +++++++++---
 .../src/components/chart/chart/chartBubble.vue  | 14 ++++++++++----
 .../components/chart/chart/chartDoughnut.vue    | 14 ++++++++++----
 .../src/components/chart/chart/chartFunnel.vue  | 14 ++++++++++----
 .../src/components/chart/chart/chartGauge.vue   | 12 +++++++++---
 .../components/chart/chart/chartHexagonD3.vue   | 16 +++++++++++-----
 .../src/components/chart/chart/chartRank.vue    | 14 ++++++++++----
 .../src/components/chart/chart/chartRose.vue    | 14 ++++++++++----
 .../src/components/chart/chart/chartSankey.vue  | 14 ++++++++++----
 .../src/components/chart/chart/chartStat.vue    | 17 +++++++++++++----
 .../src/components/chart/chart/chartTable.vue   | 16 +++++++++++-----
 .../components/chart/chart/chartTimeSeries.vue  |  6 ++++++
 .../src/components/chart/chart/chartTreemap.vue | 12 +++++++++---
 .../src/components/chart/chartMixin.js          |  7 +++++++
 14 files changed, 135 insertions(+), 47 deletions(-)

diff --git a/nezha-fronted/src/components/chart/chart/chartBar.vue b/nezha-fronted/src/components/chart/chart/chartBar.vue
index 0b7e9101a..95c99c585 100644
--- a/nezha-fronted/src/components/chart/chart/chartBar.vue
+++ b/nezha-fronted/src/components/chart/chart/chartBar.vue
@@ -5,7 +5,7 @@
     class="nz-chart__component nz-chart__component--time-series" @mouseenter="mouseEnterChart"
     @mouseleave="mouseLeaveChart"
   >
-    <div :id="`chart-canvas-${chartId}`" class="chart__canvas" :class="{'chart-cursor-default':!dataLink.length}"></div>
+    <div :id="`chart-canvas-${chartId}`" class="chart__canvas" :class="{'chart-cursor-default':!(dataLink.length || chartInfo.datasource === 'metrics' || chartInfo.datasource === 'logs')}"></div>
     <chart-legend
       v-if="hasLegend"
       :chart-data="chartData"
@@ -28,6 +28,12 @@
       </div>
       <!-- dataLink -->
       <div class="chart-dataLink-list" v-if="tooltip.dataLinkShow">
+        <!-- 复制表达式 -->
+        <div class="chart-dataLink-item select-series" v-if="chartInfo.datasource==='metrics'||chartInfo.datasource==='logs'" @click="copyExpr">
+          <i class="nz-icon nz-icon-override"></i>
+          <span v-if="chartInfo.datasource==='metrics'">{{$t('overall.copy')}} PromQL</span>
+          <span v-else>{{$t('overall.copy')}} LogQL</span>
+        </div>
         <div class="chart-dataLink-item" v-for="(item,index) in dataLink" :title='item.title' :key="index" @click="linkClick(item)">
           <i class="nz-icon nz-icon-link"></i>
           <span>{{item.title}}</span>
@@ -152,7 +158,7 @@ export default {
         }
         myChart.setOption(chartOption)
         this.isInit && setChart(this.chartId, myChart) // 缓存；不使用vue的data是为避免整个chart被监听导致卡顿
-        if (this.isInit && this.dataLink.length) {
+        if (this.isInit && (this.dataLink.length || this.chartInfo.datasource === 'metrics' || this.chartInfo.datasource === 'logs')) {
           myChart.on('click', this.chartClick)
           myChart.on('mousedown', (params) => {
             if (this.tooltip.dataLinkShow) {
@@ -266,7 +272,7 @@ export default {
       this.datalinkPosition(e)
     },
     clickout () {
-      if (this.dataLink.length) {
+      if ((this.dataLink.length || this.chartInfo.datasource === 'metrics' || this.chartInfo.datasource === 'logs') && this.tooltip.dataLinkShow) {
         this.tooltip.show = false
         this.tooltip.dataLinkShow = false
         const option = {
diff --git a/nezha-fronted/src/components/chart/chart/chartBubble.vue b/nezha-fronted/src/components/chart/chart/chartBubble.vue
index 10a02ce05..72d3c2ae4 100644
--- a/nezha-fronted/src/components/chart/chart/chartBubble.vue
+++ b/nezha-fronted/src/components/chart/chart/chartBubble.vue
@@ -3,7 +3,7 @@
     ref="bubble-chart-box"
     class="nz-chart__component"
   >
-    <div :id="`chart-canvas-${chartId}`" class="chart__canvas" :class="{'chart-cursor-default':!dataLink.length}">
+    <div :id="`chart-canvas-${chartId}`" class="chart__canvas" :class="{'chart-cursor-default':!(dataLink.length || chartInfo.datasource === 'metrics' || chartInfo.datasource === 'logs')}">
       <svg :id="`bubble-svg-${chartId}`" width="100%" height="100%"></svg>
     </div>
     <div :id="`chart-canvas-tooltip-${chartId}`" class="chart-canvas-tooltip no-style-class" :class="{'chart-dataLink-tooltip':tooltip.dataLinkShow}" :style="{left:tooltip.x+'px',top:tooltip.y+'px'}" v-if="tooltip.show" v-clickoutside="clickout">
@@ -21,6 +21,12 @@
       </div>
       <!-- dataLink -->
       <div class="chart-dataLink-list" v-if="tooltip.dataLinkShow">
+        <!-- 复制表达式 -->
+        <div class="chart-dataLink-item select-series" v-if="chartInfo.datasource==='metrics'||chartInfo.datasource==='logs'" @click="copyExpr">
+          <i class="nz-icon nz-icon-override"></i>
+          <span v-if="chartInfo.datasource==='metrics'">{{$t('overall.copy')}} PromQL</span>
+          <span v-else>{{$t('overall.copy')}} LogQL</span>
+        </div>
         <div class="chart-dataLink-item" v-for="(item,index) in dataLink" :title='item.title' :key="index" @click="linkClick(item)">
           <i class="nz-icon nz-icon-link"></i>
           <span>{{item.title}}</span>
@@ -320,7 +326,7 @@ export default {
       })
     },
     chartClick (e, data) {
-      if (this.dataLink.length) {
+      if (this.dataLink.length || this.chartInfo.datasource === 'metrics' || this.chartInfo.datasource === 'logs') {
         this.tooltip.title = data.data.alias
         this.tooltip.value = data.data.mapping && data.data.mapping.display ? this.handleDisplay(data.data.mapping.display, { ...data.data.labels, value: data.data.showValue }) : data.data.showValue
         this.tooltip.mapping = data.data.mapping
@@ -332,12 +338,12 @@ export default {
       }
     },
     chartMousedown (e) {
-      if (this.dataLink.length && this.tooltip.dataLinkShow) {
+      if (this.dataLink.length || this.chartInfo.datasource === 'metrics' || this.chartInfo.datasource === 'logs') {
         e.stopPropagation()
       }
     },
     clickout () {
-      if (this.dataLink.length && this.tooltip.dataLinkShow) {
+      if ((this.dataLink.length || this.chartInfo.datasource === 'metrics' || this.chartInfo.datasource === 'logs') && this.tooltip.dataLinkShow) {
         this.tooltip.show = false
         this.tooltip.dataLinkShow = false
       }
diff --git a/nezha-fronted/src/components/chart/chart/chartDoughnut.vue b/nezha-fronted/src/components/chart/chart/chartDoughnut.vue
index a9266d0b1..ae754831c 100644
--- a/nezha-fronted/src/components/chart/chart/chartDoughnut.vue
+++ b/nezha-fronted/src/components/chart/chart/chartDoughnut.vue
@@ -4,7 +4,7 @@
     ref="doughnut-chart-box"
     class="nz-chart__component"
   >
-    <div :id="`chart-canvas-${chartId}`" class="chart__canvas" :class="{'chart-cursor-default':!dataLink.length}" style="overflow: hidden;"></div>
+    <div :id="`chart-canvas-${chartId}`" class="chart__canvas" :class="{'chart-cursor-default':!(dataLink.length || chartInfo.datasource === 'metrics' || chartInfo.datasource === 'logs')}" style="overflow: hidden;"></div>
 
     <chart-legend
       v-if="hasLegend"
@@ -35,6 +35,12 @@
       </div>
       <!-- dataLink -->
       <div class="chart-dataLink-list" v-if="tooltip.dataLinkShow">
+        <!-- 复制表达式 -->
+        <div class="chart-dataLink-item select-series" v-if="chartInfo.datasource==='metrics'||chartInfo.datasource==='logs'" @click="copyExpr">
+          <i class="nz-icon nz-icon-override"></i>
+          <span v-if="chartInfo.datasource==='metrics'">{{$t('overall.copy')}} PromQL</span>
+          <span v-else>{{$t('overall.copy')}} LogQL</span>
+        </div>
         <div class="chart-dataLink-item" v-for="(item,index) in dataLink" :title='item.title' :key="index" @click="linkClick(item)">
           <i class="nz-icon nz-icon-link"></i>
           <span>{{item.title}}</span>
@@ -427,7 +433,7 @@ export default {
       })
     },
     chartClick (e, data) {
-      if (this.dataLink.length) {
+      if (this.dataLink.length || this.chartInfo.datasource === 'metrics' || this.chartInfo.datasource === 'logs') {
         this.tooltip.title = data.data.alias
         this.tooltip.value = data.data.mapping && data.data.mapping.display ? this.handleDisplay(data.data.mapping.display, { ...data.data.labels, value: data.data.showValue }) : data.data.showValue
         this.tooltip.mapping = data.data.mapping
@@ -439,12 +445,12 @@ export default {
       }
     },
     chartMousedown (e) {
-      if (this.dataLink.length && this.tooltip.dataLinkShow) {
+      if (this.dataLink.length || this.chartInfo.datasource === 'metrics' || this.chartInfo.datasource === 'logs') {
         e.stopPropagation()
       }
     },
     clickout () {
-      if (this.dataLink.length && this.tooltip.dataLinkShow) {
+      if ((this.dataLink.length || this.chartInfo.datasource === 'metrics' || this.chartInfo.datasource === 'logs') && this.tooltip.dataLinkShow) {
         this.tooltip.show = false
         this.tooltip.dataLinkShow = false
       }
diff --git a/nezha-fronted/src/components/chart/chart/chartFunnel.vue b/nezha-fronted/src/components/chart/chart/chartFunnel.vue
index fd5a6f792..1b4aba82c 100644
--- a/nezha-fronted/src/components/chart/chart/chartFunnel.vue
+++ b/nezha-fronted/src/components/chart/chart/chartFunnel.vue
@@ -3,7 +3,7 @@
     ref="funnel-chart-box"
     class="nz-chart__component"
   >
-    <div :id="`chart-canvas-${chartId}`" class="chart__canvas" :class="{'chart-cursor-default':!dataLink.length}">
+    <div :id="`chart-canvas-${chartId}`" class="chart__canvas" :class="{'chart-cursor-default':!(dataLink.length || chartInfo.datasource === 'metrics' || chartInfo.datasource === 'logs')}">
       <svg :id="`funnel-svg-${chartId}`" width="100%" height="100%"></svg>
     </div>
 
@@ -22,6 +22,12 @@
       </div>
       <!-- dataLink -->
       <div class="chart-dataLink-list" v-if="tooltip.dataLinkShow">
+        <!-- 复制表达式 -->
+        <div class="chart-dataLink-item select-series" v-if="chartInfo.datasource==='metrics'||chartInfo.datasource==='logs'" @click="copyExpr">
+          <i class="nz-icon nz-icon-override"></i>
+          <span v-if="chartInfo.datasource==='metrics'">{{$t('overall.copy')}} PromQL</span>
+          <span v-else>{{$t('overall.copy')}} LogQL</span>
+        </div>
         <div class="chart-dataLink-item" v-for="(item,index) in dataLink" :title='item.title' :key="index" @click="linkClick(item)">
           <i class="nz-icon nz-icon-link"></i>
           <span>{{item.title}}</span>
@@ -416,7 +422,7 @@ export default {
       })
     },
     chartClick (e, data) {
-      if (this.dataLink.length) {
+      if (this.dataLink.length || this.chartInfo.datasource === 'metrics' || this.chartInfo.datasource === 'logs') {
         this.tooltip.title = data.alias
         this.tooltip.value = data.mapping && data.mapping.display ? this.handleDisplay(data.mapping.display, { ...data.labels, value: data.showValue }) : data.showValue
         this.tooltip.mapping = data.mapping
@@ -428,12 +434,12 @@ export default {
       }
     },
     chartMousedown (e) {
-      if (this.dataLink.length && this.tooltip.dataLinkShow) {
+      if (this.dataLink.length || this.chartInfo.datasource === 'metrics' || this.chartInfo.datasource === 'logs') {
         e.stopPropagation()
       }
     },
     clickout () {
-      if (this.dataLink.length && this.tooltip.dataLinkShow) {
+      if ((this.dataLink.length || this.chartInfo.datasource === 'metrics' || this.chartInfo.datasource === 'logs') && this.tooltip.dataLinkShow) {
         this.tooltip.show = false
         this.tooltip.dataLinkShow = false
       }
diff --git a/nezha-fronted/src/components/chart/chart/chartGauge.vue b/nezha-fronted/src/components/chart/chart/chartGauge.vue
index a07cc3b01..90934d7a1 100644
--- a/nezha-fronted/src/components/chart/chart/chartGauge.vue
+++ b/nezha-fronted/src/components/chart/chart/chartGauge.vue
@@ -8,7 +8,7 @@
       <div
         :id="isFullscreen?('chart-gauge-screen-' + chartInfo.id + '-' + index):('chart-gauge-' + chartInfo.id + '-' + index)"
         class="chart-gauge-content"
-        :class="{'chart-cursor-default':!dataLink.length}"
+        :class="{'chart-cursor-default':!(dataLink.length || chartInfo.datasource === 'metrics' || chartInfo.datasource === 'logs')}"
       ></div>
       <div
         v-if="item.height > 48 && chartInfo.param &&( chartInfo.param.text === 'legend' || chartInfo.param.text === 'all' )"
@@ -31,6 +31,12 @@
       </div>
       <!-- dataLink -->
       <div class="chart-dataLink-list" v-if="tooltip.dataLinkShow">
+        <!-- 复制表达式 -->
+        <div class="chart-dataLink-item select-series" v-if="chartInfo.datasource==='metrics'||chartInfo.datasource==='logs'" @click="copyExpr">
+          <i class="nz-icon nz-icon-override"></i>
+          <span v-if="chartInfo.datasource==='metrics'">{{$t('overall.copy')}} PromQL</span>
+          <span v-else>{{$t('overall.copy')}} LogQL</span>
+        </div>
         <div class="chart-dataLink-item" v-for="(item,index) in dataLink" :title='item.title' :key="index" @click="linkClick(item)">
           <i class="nz-icon nz-icon-link"></i>
           <span>{{item.title}}</span>
@@ -234,7 +240,7 @@ export default {
         // option.tooltip.position = this.formatterFunc
         option.series[0].min = item.max == item.min ? 0 : item.min
         myChart.setOption(option)
-        if (this.dataLink.length) {
+        if (this.dataLink.length || this.chartInfo.datasource === 'metrics' || this.chartInfo.datasource === 'logs') {
           myChart.on('click', this.chartClick)
           myChart.on('mousedown', (params) => {
             if (this.tooltip.dataLinkShow) {
@@ -321,7 +327,7 @@ export default {
       this.datalinkPosition(e)
     },
     clickout () {
-      if (this.dataLink.length) {
+      if ((this.dataLink.length || this.chartInfo.datasource === 'metrics' || this.chartInfo.datasource === 'logs') && this.tooltip.dataLinkShow) {
         this.tooltip.show = false
         this.tooltip.dataLinkShow = false
         const option = {
diff --git a/nezha-fronted/src/components/chart/chart/chartHexagonD3.vue b/nezha-fronted/src/components/chart/chart/chartHexagonD3.vue
index 63b2d4a4c..736ae837f 100644
--- a/nezha-fronted/src/components/chart/chart/chartHexagonD3.vue
+++ b/nezha-fronted/src/components/chart/chart/chartHexagonD3.vue
@@ -1,6 +1,6 @@
 <template>
   <div :ref="`chart-canvas-${chartId}`" style="height: 100%;width: 100%;position: relative;">
-    <div :id="`chart-canvas-${chartId}`" class="chart__canvas chart-svg"></div>
+    <div :id="`chart-canvas-${chartId}`" class="chart__canvas chart-svg" :class="{'chart-cursor-default':!(dataLink.length || chartInfo.datasource === 'metrics' || chartInfo.datasource === 'logs')}"></div>
     <div :id="`chart-canvas-tooltip-${chartId}`" class="chart-canvas-tooltip no-style-class" :class="{'chart-dataLink-tooltip':tooltip.dataLinkShow}" :style="{left:tooltip.x+'px',top:tooltip.y+'px'}" v-if="tooltip.show" v-clickoutside="clickout">
       <div class="chart-canvas-tooltip-title tooltip-title" :title="tooltip.title">
         {{tooltip.title}}
@@ -16,6 +16,12 @@
       </div>
       <!-- dataLink -->
       <div class="chart-dataLink-list" v-if="tooltip.dataLinkShow">
+        <!-- 复制表达式 -->
+        <div class="chart-dataLink-item select-series" v-if="chartInfo.datasource==='metrics'||chartInfo.datasource==='logs'" @click="copyExpr">
+          <i class="nz-icon nz-icon-override"></i>
+          <span v-if="chartInfo.datasource==='metrics'">{{$t('overall.copy')}} PromQL</span>
+          <span v-else>{{$t('overall.copy')}} LogQL</span>
+        </div>
         <div class="chart-dataLink-item" v-for="(item,index) in dataLink" :title='item.title' :key="index" @click="linkClick(item)">
           <i class="nz-icon nz-icon-link"></i>
           <span>{{item.title}}</span>
@@ -246,7 +252,7 @@ export default {
         .attr('stroke-linejoin', 'round')
         .attr('stroke-width', 1)
         .attr('transform', 'translate(' + x + ',' + y + ')')
-        .style('cursor', this.dataLink.length ? 'pointer' : 'default')
+        .style('cursor', 'pointer')
       return hexagon
     },
     drawText (svg, vals, point, color, hexbinRadius, group) {
@@ -471,7 +477,7 @@ export default {
       })
     },
     chartClick (data, e) {
-      if (this.dataLink.length) {
+      if (this.dataLink.length || this.chartInfo.datasource === 'metrics' || this.chartInfo.datasource === 'logs') {
         this.tooltip.title = data.alias
         this.tooltip.value = data.mapping && data.mapping.display ? this.handleDisplay(data.mapping.display, { ...data.metrics, legend: data.alias, value: data.showValue }) : data.showValue
         this.tooltip.mapping = data.mapping
@@ -483,12 +489,12 @@ export default {
       }
     },
     chartMousedown (e) {
-      if (this.dataLink.length && this.tooltip.dataLinkShow) {
+      if (this.dataLink.length || this.chartInfo.datasource === 'metrics' || this.chartInfo.datasource === 'logs') {
         e.stopPropagation()
       }
     },
     clickout () {
-      if (this.dataLink.length && this.tooltip.dataLinkShow) {
+      if ((this.dataLink.length || this.chartInfo.datasource === 'metrics' || this.chartInfo.datasource === 'logs') && this.tooltip.dataLinkShow) {
         this.tooltip.show = false
         this.tooltip.dataLinkShow = false
       }
diff --git a/nezha-fronted/src/components/chart/chart/chartRank.vue b/nezha-fronted/src/components/chart/chart/chartRank.vue
index b8dc92e6d..5e0814422 100644
--- a/nezha-fronted/src/components/chart/chart/chartRank.vue
+++ b/nezha-fronted/src/components/chart/chart/chartRank.vue
@@ -3,7 +3,7 @@
     ref="rank-chart-box"
     class="nz-chart__component"
   >
-    <div :id="`chart-canvas-${chartId}`" class="chart__canvas" :class="{'chart-cursor-default':!dataLink.length}" style="overflow-y:auto;">
+    <div :id="`chart-canvas-${chartId}`" class="chart__canvas" :class="{'chart-cursor-default':!(dataLink.length || chartInfo.datasource === 'metrics' || chartInfo.datasource === 'logs')}" style="overflow-y:auto;">
       <svg :id="`rank-svg-${chartId}`" width="100%" style="vertical-align: top;"></svg>
     </div>
 
@@ -26,6 +26,12 @@
       </div>
       <!-- dataLink -->
       <div class="chart-dataLink-list" v-if="tooltip.dataLinkShow">
+        <!-- 复制表达式 -->
+        <div class="chart-dataLink-item select-series" v-if="chartInfo.datasource==='metrics'||chartInfo.datasource==='logs'" @click="copyExpr">
+          <i class="nz-icon nz-icon-override"></i>
+          <span v-if="chartInfo.datasource==='metrics'">{{$t('overall.copy')}} PromQL</span>
+          <span v-else>{{$t('overall.copy')}} LogQL</span>
+        </div>
         <div class="chart-dataLink-item" v-for="(item,index) in dataLink" :title='item.title' :key="index" @click="linkClick(item)">
           <i class="nz-icon nz-icon-link"></i>
           <span>{{item.title}}</span>
@@ -333,7 +339,7 @@ export default {
       })
     },
     chartClick (e, data) {
-      if (this.dataLink.length) {
+      if (this.dataLink.length || this.chartInfo.datasource === 'metrics' || this.chartInfo.datasource === 'logs') {
         this.tooltip.title = data.alias
         this.tooltip.value = data.mapping && data.mapping.display ? this.handleDisplay(data.mapping.display, { ...data.labels, value: data.showValue }) : data.showValue
         this.tooltip.mapping = data.mapping
@@ -345,12 +351,12 @@ export default {
       }
     },
     chartMousedown (e) {
-      if (this.dataLink.length && this.tooltip.dataLinkShow) {
+      if (this.dataLink.length || this.chartInfo.datasource === 'metrics' || this.chartInfo.datasource === 'logs') {
         e.stopPropagation()
       }
     },
     clickout () {
-      if (this.dataLink.length && this.tooltip.dataLinkShow) {
+      if ((this.dataLink.length || this.chartInfo.datasource === 'metrics' || this.chartInfo.datasource === 'logs') && this.tooltip.dataLinkShow) {
         this.tooltip.show = false
         this.tooltip.dataLinkShow = false
       }
diff --git a/nezha-fronted/src/components/chart/chart/chartRose.vue b/nezha-fronted/src/components/chart/chart/chartRose.vue
index 2f406343a..b206e6a4e 100644
--- a/nezha-fronted/src/components/chart/chart/chartRose.vue
+++ b/nezha-fronted/src/components/chart/chart/chartRose.vue
@@ -4,7 +4,7 @@
     ref="rose-chart-box"
     class="nz-chart__component"
   >
-    <div :id="`chart-canvas-${chartId}`" class="chart__canvas" :class="{'chart-cursor-default':!dataLink.length}" style="overflow: hidden;"></div>
+    <div :id="`chart-canvas-${chartId}`" class="chart__canvas" :class="{'chart-cursor-default':!(dataLink.length || chartInfo.datasource === 'metrics' || chartInfo.datasource === 'logs')}" style="overflow: hidden;"></div>
 
     <chart-legend
       v-if="hasLegend"
@@ -35,6 +35,12 @@
       </div>
       <!-- dataLink -->
       <div class="chart-dataLink-list" v-if="tooltip.dataLinkShow">
+        <!-- 复制表达式 -->
+        <div class="chart-dataLink-item select-series" v-if="chartInfo.datasource==='metrics'||chartInfo.datasource==='logs'" @click="copyExpr">
+          <i class="nz-icon nz-icon-override"></i>
+          <span v-if="chartInfo.datasource==='metrics'">{{$t('overall.copy')}} PromQL</span>
+          <span v-else>{{$t('overall.copy')}} LogQL</span>
+        </div>
         <div class="chart-dataLink-item" v-for="(item,index) in dataLink" :title='item.title' :key="index" @click="linkClick(item)">
           <i class="nz-icon nz-icon-link"></i>
           <span>{{item.title}}</span>
@@ -454,7 +460,7 @@ export default {
       })
     },
     chartClick (e, data) {
-      if (this.dataLink.length) {
+      if (this.dataLink.length || this.chartInfo.datasource === 'metrics' || this.chartInfo.datasource === 'logs') {
         this.tooltip.title = data.data.alias
         this.tooltip.value = data.data.mapping && data.data.mapping.display ? this.handleDisplay(data.data.mapping.display, { ...data.data.labels, value: data.data.showValue }) : data.data.showValue
         this.tooltip.mapping = data.data.mapping
@@ -466,12 +472,12 @@ export default {
       }
     },
     chartMousedown (e) {
-      if (this.dataLink.length && this.tooltip.dataLinkShow) {
+      if (this.dataLink.length || this.chartInfo.datasource === 'metrics' || this.chartInfo.datasource === 'logs') {
         e.stopPropagation()
       }
     },
     clickout () {
-      if (this.dataLink.length && this.tooltip.dataLinkShow) {
+      if ((this.dataLink.length || this.chartInfo.datasource === 'metrics' || this.chartInfo.datasource === 'logs') && this.tooltip.dataLinkShow) {
         this.tooltip.show = false
         this.tooltip.dataLinkShow = false
       }
diff --git a/nezha-fronted/src/components/chart/chart/chartSankey.vue b/nezha-fronted/src/components/chart/chart/chartSankey.vue
index bfb887bdc..50b8c8ecc 100644
--- a/nezha-fronted/src/components/chart/chart/chartSankey.vue
+++ b/nezha-fronted/src/components/chart/chart/chartSankey.vue
@@ -4,7 +4,7 @@
     class="nz-chart__component nz-chart__component--time-series" @mouseenter="mouseEnterChart"
     @mouseleave="mouseLeaveChart"
   >
-    <div :id="`chart-canvas-${chartId}`" class="chart__canvas" :class="{'chart-cursor-default':!dataLink.length}">
+    <div :id="`chart-canvas-${chartId}`" class="chart__canvas" :class="{'chart-cursor-default':!(dataLink.length || chartInfo.datasource === 'metrics' || chartInfo.datasource === 'logs')}">
       <svg :id="`sankey-svg-${chartId}`" width="100%" height="100%"></svg>
     </div>
 
@@ -23,6 +23,12 @@
       </div>
       <!-- dataLink -->
       <div class="chart-dataLink-list" v-if="tooltip.dataLinkShow">
+        <!-- 复制表达式 -->
+        <div class="chart-dataLink-item select-series" v-if="chartInfo.datasource==='metrics'||chartInfo.datasource==='logs'" @click="copyExpr">
+          <i class="nz-icon nz-icon-override"></i>
+          <span v-if="chartInfo.datasource==='metrics'">{{$t('overall.copy')}} PromQL</span>
+          <span v-else>{{$t('overall.copy')}} LogQL</span>
+        </div>
         <div class="chart-dataLink-item" v-for="(item,index) in dataLink" :title='item.title' :key="index" @click="linkClick(item)">
           <i class="nz-icon nz-icon-link"></i>
           <span>{{item.title}}</span>
@@ -441,7 +447,7 @@ export default {
       })
     },
     chartClick (e, data) {
-      if (this.dataLink.length) {
+      if (this.dataLink.length || this.chartInfo.datasource === 'metrics' || this.chartInfo.datasource === 'logs') {
         this.tooltip.title = data.node ? data.node : data.source.node + '  ——>  ' + data.target.node
         this.tooltip.value = data.mapping && data.mapping.display ? this.handleDisplay(data.mapping.display, { ...data.labels, value: data.showValue }) : data.showValue
         this.tooltip.mapping = data.mapping
@@ -453,12 +459,12 @@ export default {
       }
     },
     chartMousedown (e) {
-      if (this.dataLink.length && this.tooltip.dataLinkShow) {
+      if (this.dataLink.length || this.chartInfo.datasource === 'metrics' || this.chartInfo.datasource === 'logs') {
         e.stopPropagation()
       }
     },
     clickout () {
-      if (this.dataLink.length && this.tooltip.dataLinkShow) {
+      if ((this.dataLink.length || this.chartInfo.datasource === 'metrics' || this.chartInfo.datasource === 'logs') && this.tooltip.dataLinkShow) {
         this.tooltip.show = false
         this.tooltip.dataLinkShow = false
       }
diff --git a/nezha-fronted/src/components/chart/chart/chartStat.vue b/nezha-fronted/src/components/chart/chart/chartStat.vue
index 7c34323e2..051d60410 100644
--- a/nezha-fronted/src/components/chart/chart/chartStat.vue
+++ b/nezha-fronted/src/components/chart/chart/chartStat.vue
@@ -9,7 +9,10 @@
       @mouseleave="statMouseleave(item)"
       @click="chartClick($event,item)"
       @mousedown="chartMousedown($event)"
-      :class="{'only-stat':statData.length===1,'chart-cursor-pointer':dataLink.length}"
+      :class="{
+        'only-stat':statData.length===1,
+        'chart-cursor-pointer':(dataLink.length || chartInfo.datasource === 'metrics' || chartInfo.datasource === 'logs')
+      }"
       :style="{
         background:item.mapping ? item.mapping.color.bac : (statData.length===1 ? '' : colorList[index]),
         height:item.height+'px',
@@ -90,6 +93,12 @@
       </div>
       <!-- dataLink -->
       <div class="chart-dataLink-list" v-if="tooltip.dataLinkShow">
+        <!-- 复制表达式 -->
+        <div class="chart-dataLink-item select-series" v-if="chartInfo.datasource==='metrics'||chartInfo.datasource==='logs'" @click="copyExpr">
+          <i class="nz-icon nz-icon-override"></i>
+          <span v-if="chartInfo.datasource==='metrics'">{{$t('overall.copy')}} PromQL</span>
+          <span v-else>{{$t('overall.copy')}} LogQL</span>
+        </div>
         <div class="chart-dataLink-item" v-for="(item,index) in dataLink" :title='item.title' :key="index" @click="linkClick(item)">
           <i class="nz-icon nz-icon-link"></i>
           <span>{{item.title}}</span>
@@ -528,7 +537,7 @@ export default {
       })
     },
     chartClick (e, data) {
-      if (this.dataLink.length) {
+      if (this.dataLink.length || this.chartInfo.datasource === 'metrics' || this.chartInfo.datasource === 'logs') {
         this.tooltip.title = data.legend
         this.tooltip.value = data.mapping && data.mapping.display ? this.handleDisplay(data.mapping.display, { ...data.label, value: data.showValue }) : data.showValue
         this.tooltip.mapping = data.mapping
@@ -540,12 +549,12 @@ export default {
       }
     },
     chartMousedown (e) {
-      if (this.dataLink.length && this.tooltip.dataLinkShow) {
+      if (this.dataLink.length || this.chartInfo.datasource === 'metrics' || this.chartInfo.datasource === 'logs') {
         e.stopPropagation()
       }
     },
     clickout () {
-      if (this.dataLink.length && this.tooltip.dataLinkShow) {
+      if ((this.dataLink.length || this.chartInfo.datasource === 'metrics' || this.chartInfo.datasource === 'logs') && this.tooltip.dataLinkShow) {
         this.tooltip.show = false
         this.tooltip.dataLinkShow = false
       }
diff --git a/nezha-fronted/src/components/chart/chart/chartTable.vue b/nezha-fronted/src/components/chart/chart/chartTable.vue
index ce451e9d4..a0a22807f 100644
--- a/nezha-fronted/src/components/chart/chart/chartTable.vue
+++ b/nezha-fronted/src/components/chart/chart/chartTable.vue
@@ -33,7 +33,7 @@
             }"
             class="value-mapping-table"
             :title="showValueMapping(scope.row,col.title, col)"
-            :class="{'chart-cursor-pointer':dataLink.length}"
+            :class="{'chart-cursor-pointer':(dataLink.length || chartInfo.datasource === 'metrics' || chartInfo.datasource === 'logs')}"
             @click="chartClick($event,col,scope.row)"
             @mousedown="chartMousedown($event)"
           >
@@ -42,7 +42,7 @@
             </template>
             {{showValueMapping(scope.row,col.title, col)}}
           </div>
-          <div v-else class="value-mapping-table"  :title="scope.row.display[col.title + 'display'].display"  :class="{'chart-cursor-pointer':dataLink.length}" @click="chartClick($event,col,scope.row)" @mousedown="chartMousedown($event)">
+          <div v-else class="value-mapping-table"  :title="scope.row.display[col.title + 'display'].display"  :class="{'chart-cursor-pointer':(dataLink.length || chartInfo.datasource === 'metrics' || chartInfo.datasource === 'logs')}" @click="chartClick($event,col,scope.row)" @mousedown="chartMousedown($event)">
             {{scope.row.display[col.title + 'display'].display}}
           </div>
         </template>
@@ -68,6 +68,12 @@
       </div>
       <!-- dataLink -->
       <div class="chart-dataLink-list" v-if="tooltip.dataLinkShow">
+        <!-- 复制表达式 -->
+        <div class="chart-dataLink-item select-series" v-if="chartInfo.datasource==='metrics'||chartInfo.datasource==='logs'" @click="copyExpr">
+          <i class="nz-icon nz-icon-override"></i>
+          <span v-if="chartInfo.datasource==='metrics'">{{$t('overall.copy')}} PromQL</span>
+          <span v-else>{{$t('overall.copy')}} LogQL</span>
+        </div>
         <div class="chart-dataLink-item" v-for="(item,index) in dataLink" :title='item.title' :key="index" @click="linkClick(item)">
           <i class="nz-icon nz-icon-link"></i>
           <span>{{item.title}}</span>
@@ -488,7 +494,7 @@ export default {
       })
     },
     chartClick (e, col, row) {
-      if (this.dataLink.length) {
+      if (this.dataLink.length || this.chartInfo.datasource === 'metrics' || this.chartInfo.datasource === 'logs') {
         // 对象扁平化
         let flattenedObject
         for (const key in row) {
@@ -513,12 +519,12 @@ export default {
       }
     },
     chartMousedown (e) {
-      if (this.dataLink.length && this.tooltip.dataLinkShow) {
+      if (this.dataLink.length || this.chartInfo.datasource === 'metrics' || this.chartInfo.datasource === 'logs') {
         e.stopPropagation()
       }
     },
     clickout () {
-      if (this.dataLink.length && this.tooltip.dataLinkShow) {
+      if ((this.dataLink.length || this.chartInfo.datasource === 'metrics' || this.chartInfo.datasource === 'logs') && this.tooltip.dataLinkShow) {
         this.tooltip.show = false
         this.tooltip.dataLinkShow = false
       }
diff --git a/nezha-fronted/src/components/chart/chart/chartTimeSeries.vue b/nezha-fronted/src/components/chart/chart/chartTimeSeries.vue
index 116a8597f..83dc62ce5 100644
--- a/nezha-fronted/src/components/chart/chart/chartTimeSeries.vue
+++ b/nezha-fronted/src/components/chart/chart/chartTimeSeries.vue
@@ -26,6 +26,12 @@
       <div v-html="tooltip.tooltipHtml"></div>
       <!-- dataLink -->
       <div class="chart-dataLink-list" v-if="tooltip.dataLinkShow">
+        <!-- 复制表达式 -->
+        <div class="chart-dataLink-item select-series" v-if="chartInfo.datasource==='metrics'||chartInfo.datasource==='logs'" @click="copyExpr">
+          <i class="nz-icon nz-icon-override"></i>
+          <span v-if="chartInfo.datasource==='metrics'">{{$t('overall.copy')}} PromQL</span>
+          <span v-else>{{$t('overall.copy')}} LogQL</span>
+        </div>
         <!-- 只有一条数据时显示 -->
         <div class="chart-dataLink-item select-series" v-if="isGrey.filter(value => value === false).length==1" @click="showAllSeries">
           <i class="nz-icon nz-icon-a-Showallseries"></i>
diff --git a/nezha-fronted/src/components/chart/chart/chartTreemap.vue b/nezha-fronted/src/components/chart/chart/chartTreemap.vue
index 9d863e42b..aa320052f 100644
--- a/nezha-fronted/src/components/chart/chart/chartTreemap.vue
+++ b/nezha-fronted/src/components/chart/chart/chartTreemap.vue
@@ -5,7 +5,7 @@
     class="nz-chart__component nz-chart__component--time-series" @mouseenter="mouseEnterChart"
     @mouseleave="mouseLeaveChart"
   >
-    <div :id="`chart-canvas-${chartId}`" class="chart__canvas" :class="{'chart-cursor-default':!dataLink.length}"></div>
+    <div :id="`chart-canvas-${chartId}`" class="chart__canvas" :class="{'chart-cursor-default':!(dataLink.length || chartInfo.datasource === 'metrics' || chartInfo.datasource === 'logs')}"></div>
     <chart-legend
       v-if="hasLegend"
       :chart-data="chartData"
@@ -28,6 +28,12 @@
       </div>
       <!-- dataLink -->
       <div class="chart-dataLink-list" v-if="tooltip.dataLinkShow">
+        <!-- 复制表达式 -->
+        <div class="chart-dataLink-item select-series" v-if="chartInfo.datasource==='metrics'||chartInfo.datasource==='logs'" @click="copyExpr">
+          <i class="nz-icon nz-icon-override"></i>
+          <span v-if="chartInfo.datasource==='metrics'">{{$t('overall.copy')}} PromQL</span>
+          <span v-else>{{$t('overall.copy')}} LogQL</span>
+        </div>
         <div class="chart-dataLink-item" v-for="(item,index) in dataLink" :title='item.title' :key="index" @click="linkClick(item)">
           <i class="nz-icon nz-icon-link"></i>
           <span>{{item.title}}</span>
@@ -119,7 +125,7 @@ export default {
         }
         myChart.setOption(chartOption)
         this.isInit && setChart(this.chartId, myChart) // 缓存；不使用vue的data是为避免整个chart被监听导致卡顿
-        if (this.isInit && this.dataLink.length) {
+        if (this.isInit && (this.dataLink.length || this.chartInfo.datasource === 'metrics' || this.chartInfo.datasource === 'logs')) {
           myChart.on('click', this.chartClick)
           myChart.on('mousedown', (params) => {
             if (this.tooltip.dataLinkShow && params.dataIndex) {
@@ -237,7 +243,7 @@ export default {
       this.datalinkPosition(e)
     },
     clickout () {
-      if (this.dataLink.length) {
+      if ((this.dataLink.length || this.chartInfo.datasource === 'metrics' || this.chartInfo.datasource === 'logs') && this.tooltip.dataLinkShow) {
         this.tooltip.show = false
         this.tooltip.dataLinkShow = false
         const option = {
diff --git a/nezha-fronted/src/components/chart/chartMixin.js b/nezha-fronted/src/components/chart/chartMixin.js
index 84f45cb0c..b21da609b 100644
--- a/nezha-fronted/src/components/chart/chartMixin.js
+++ b/nezha-fronted/src/components/chart/chartMixin.js
@@ -486,6 +486,13 @@ export default {
       }
       this.clickout()
     },
+    copyExpr () {
+      const expr = this.chartInfo.elements[this.tooltip.metric.expressionIndex].expression || ''
+      this.$copyText(expr).then(() => {
+        this.$message.success({ message: this.$t('overall.copySuccess') })
+        this.clickout()
+      })
+    },
     beforeDownloadCSV (chart) {
       let csv = ''
       switch (chart.type) {

From 3bc736a69c412ffdc60588d007d5537a459c06e5 Mon Sep 17 00:00:00 2001
From: zyh <zhuyanheng@geedgenetworks.com>
Date: Mon, 25 Sep 2023 11:25:21 +0800
Subject: [PATCH 2/3] =?UTF-8?q?fix=EF=BC=9A=E9=9D=A2=E7=A7=AF=E5=9B=BE?=
 =?UTF-8?q?=E4=B8=8D=E4=BD=BF=E7=94=A8=E6=B8=90=E5=8F=98=20opacity?=
 =?UTF-8?q?=E4=B8=BA0.1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 nezha-fronted/package-lock.json                  |  5 +++++
 nezha-fronted/src/components/chart/chartMixin.js | 13 ++-----------
 2 files changed, 7 insertions(+), 11 deletions(-)

diff --git a/nezha-fronted/package-lock.json b/nezha-fronted/package-lock.json
index 8f4454e48..47f00c56c 100644
--- a/nezha-fronted/package-lock.json
+++ b/nezha-fronted/package-lock.json
@@ -6910,6 +6910,11 @@
       "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.1.tgz",
       "integrity": "sha512-DJR/VvkAvSZW9bTouZue2sSxDwdTN92uHjqeKVm+0dAqdfNykRzQ95tay8aXMBAAPpUiq4Qcug2L7neoRh2Egw=="
     },
+    "csv-string": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/csv-string/-/csv-string-4.1.1.tgz",
+      "integrity": "sha512-KGvaJEZEdh2O/EVvczwbPLqJZtSQaWQ4cEJbiOJEG4ALq+dBBqNmBkRXTF4NV79V25+XYtiqbco1IWrmHLm5FQ=="
+    },
     "cuint": {
       "version": "0.2.2",
       "resolved": "https://registry.npmjs.org/cuint/-/cuint-0.2.2.tgz",
diff --git a/nezha-fronted/src/components/chart/chartMixin.js b/nezha-fronted/src/components/chart/chartMixin.js
index 6f810eb1c..64899d503 100644
--- a/nezha-fronted/src/components/chart/chartMixin.js
+++ b/nezha-fronted/src/components/chart/chartMixin.js
@@ -9,7 +9,7 @@ import {
   chartTimeSeriesAreaOption,
   chartTimeSeriesScatterOption
 } from './chart/options/chartTimeSeries'
-import * as CSV from 'csv-string';
+import * as CSV from 'csv-string'
 export default {
   data () {
     return {
@@ -169,16 +169,7 @@ export default {
             // 判断如果是面积图 颜色设为渐变色
             if (s.areaStyle && this.colorList.length) {
               s.areaStyle = {
-                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-                  {
-                    offset: 0,
-                    color: this.hexToRgb(this.colorList[colorIndex], 0.1)
-                  },
-                  {
-                    offset: 1,
-                    color: this.hexToRgb(this.colorList[colorIndex], 1)
-                  }
-                ])
+                opacity: 0.1
               }
             }
             series.push(s)

From f4676d05787bf7236eb6e7c5e7dfa500c8007df6 Mon Sep 17 00:00:00 2001
From: zyh <zhuyanheng@geedgenetworks.com>
Date: Mon, 25 Sep 2023 14:00:30 +0800
Subject: [PATCH 3/3] =?UTF-8?q?fix=EF=BC=9A=E4=BF=AE=E6=94=B9stat=E5=9B=BE?=
 =?UTF-8?q?=E8=A1=A8=E9=9D=A2=E7=A7=AF=E5=9B=BE=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/chart/chart/chartStat.vue         | 12 ++----------
 1 file changed, 2 insertions(+), 10 deletions(-)

diff --git a/nezha-fronted/src/components/chart/chart/chartStat.vue b/nezha-fronted/src/components/chart/chart/chartStat.vue
index 051d60410..c7bf3601f 100644
--- a/nezha-fronted/src/components/chart/chart/chartStat.vue
+++ b/nezha-fronted/src/components/chart/chart/chartStat.vue
@@ -399,16 +399,8 @@ export default {
         }]
         if (this.chartInfo.param.sparklineMode === 'area') {
           chartOption.series[0].areaStyle = {
-            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-              {
-                offset: 0,
-                color: this.hexToRgb(color, 0.1)
-              },
-              {
-                offset: 1,
-                color: this.hexToRgb(color, 1)
-              }
-            ])
+            color: color,
+            opacity: 0.1
           }
         }
         chartOption.yAxis.max = this.maxValue