From 470f8cddae2d9b998394600b41b666f18a5af396 Mon Sep 17 00:00:00 2001
From: junjie <junjie.xia@fit2cloud.com>
Date: Wed, 24 Mar 2021 13:32:29 +0800
Subject: [PATCH] =?UTF-8?q?feat(=E8=A7=86=E5=9B=BE):=20=E5=A2=9E=E5=8A=A0?=
 =?UTF-8?q?=E8=83=8C=E6=99=AF=E8=AE=BE=E7=BD=AE=EF=BC=8C=E6=A0=B7=E5=BC=8F?=
 =?UTF-8?q?=E7=AD=89=E8=B0=83=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/lang/zh.js                       |  4 +-
 frontend/src/views/chart/chart/chart.js       |  4 +
 .../src/views/chart/chart/common/common.js    |  5 ++
 .../views/chart/components/ChartComponent.vue |  2 +-
 .../BackgroundColorSelector.vue               | 90 +++++++++++++++++++
 .../component-style/LegendSelector.vue        |  8 +-
 .../component-style/TitleSelector.vue         |  8 +-
 .../component-style/XAxisSelector.vue         |  6 +-
 .../component-style/YAxisSelector.vue         |  6 +-
 .../components/shape-attr/ColorSelector.vue   |  6 +-
 .../components/shape-attr/LabelSelector.vue   | 18 ++--
 .../components/shape-attr/SizeSelector.vue    |  6 +-
 .../components/shape-attr/TooltipSelector.vue |  8 +-
 frontend/src/views/chart/group/Group.vue      | 12 ++-
 frontend/src/views/chart/view/ChartEdit.vue   | 21 ++++-
 15 files changed, 178 insertions(+), 26 deletions(-)
 create mode 100644 frontend/src/views/chart/components/component-style/BackgroundColorSelector.vue

diff --git a/frontend/src/lang/zh.js b/frontend/src/lang/zh.js
index 235154e72a..c5b4bfb8ed 100644
--- a/frontend/src/lang/zh.js
+++ b/frontend/src/lang/zh.js
@@ -679,7 +679,9 @@ export default {
     desc: '降序',
     sort: '排序',
     filter: '过滤',
-    none: '无'
+    none: '无',
+    background: '背景',
+    alpha: '透明度'
   },
   dataset: {
     datalist: '数据集',
diff --git a/frontend/src/views/chart/chart/chart.js b/frontend/src/views/chart/chart/chart.js
index 1d5df1b4ee..6c77b1264c 100644
--- a/frontend/src/views/chart/chart/chart.js
+++ b/frontend/src/views/chart/chart/chart.js
@@ -71,6 +71,10 @@ export const DEFAULT_YAXIS_STYLE = {
     formatter: '{value}'
   }
 }
+export const DEFAULT_BACKGROUND_COLOR = {
+  color: '#ffffff',
+  alpha: 0
+}
 // chart config
 export const BASE_BAR = {
   title: {
diff --git a/frontend/src/views/chart/chart/common/common.js b/frontend/src/views/chart/chart/common/common.js
index 6d19b2eba2..b47e0b9fe5 100644
--- a/frontend/src/views/chart/chart/common/common.js
+++ b/frontend/src/views/chart/chart/common/common.js
@@ -1,3 +1,5 @@
+import { hexColorToRGBA } from '@/views/chart/chart/util'
+
 export function componentStyle(chart_option, chart) {
   if (chart.customStyle) {
     const customStyle = JSON.parse(chart.customStyle)
@@ -31,5 +33,8 @@ export function componentStyle(chart_option, chart) {
       chart_option.yAxis.name = customStyle.yAxis.name
       chart_option.yAxis.axisLabel = customStyle.yAxis.axisLabel
     }
+    if (customStyle.background) {
+      chart_option.backgroundColor = hexColorToRGBA(customStyle.background.color, customStyle.background.alpha)
+    }
   }
 }
diff --git a/frontend/src/views/chart/components/ChartComponent.vue b/frontend/src/views/chart/components/ChartComponent.vue
index 8d7f150221..88230a6c14 100644
--- a/frontend/src/views/chart/components/ChartComponent.vue
+++ b/frontend/src/views/chart/components/ChartComponent.vue
@@ -53,7 +53,7 @@ export default {
         chart_option = stackBarOption(JSON.parse(JSON.stringify(BASE_BAR)), chart)
       } else if (chart.type === 'bar-horizontal') {
         chart_option = horizontalBarOption(JSON.parse(JSON.stringify(HORIZONTAL_BAR)), chart)
-      } else if (chart.type === 'bar-horizontal-stack') {
+      } else if (chart.type === 'bar-stack-horizontal') {
         chart_option = horizontalStackBarOption(JSON.parse(JSON.stringify(HORIZONTAL_BAR)), chart)
       } else if (chart.type === 'line') {
         chart_option = baseLineOption(JSON.parse(JSON.stringify(BASE_LINE)), chart)
diff --git a/frontend/src/views/chart/components/component-style/BackgroundColorSelector.vue b/frontend/src/views/chart/components/component-style/BackgroundColorSelector.vue
new file mode 100644
index 0000000000..7ec8fc943a
--- /dev/null
+++ b/frontend/src/views/chart/components/component-style/BackgroundColorSelector.vue
@@ -0,0 +1,90 @@
+<template>
+  <div>
+    <div style="width: 100%">
+      <el-popover
+        placement="right"
+        width="400"
+        trigger="click"
+      >
+        <el-col>
+          <el-form ref="colorForm" :model="colorForm" label-width="80px" size="mini">
+            <el-form-item :label="$t('chart.color')" class="form-item">
+              <colorPicker v-model="colorForm.color" style="margin-top: 6px;cursor: pointer;z-index: 999;border: solid 1px black" @change="changeBackgroundStyle" />
+            </el-form-item>
+            <el-form-item :label="$t('chart.alpha')" class="form-item">
+              <el-slider v-model="colorForm.alpha" show-input :show-input-controls="false" input-size="mini" @change="changeBackgroundStyle" />
+            </el-form-item>
+          </el-form>
+        </el-col>
+
+        <el-button slot="reference" size="mini" class="shape-item">{{ $t('chart.background') }}<i class="el-icon-setting el-icon--right" /></el-button>
+      </el-popover>
+    </div>
+  </div>
+</template>
+
+<script>
+import { DEFAULT_BACKGROUND_COLOR } from '../../chart/chart'
+
+export default {
+  name: 'BackgroundColorSelector',
+  props: {
+    chart: {
+      type: Object,
+      required: true
+    }
+  },
+  data() {
+    return {
+      colorForm: JSON.parse(JSON.stringify(DEFAULT_BACKGROUND_COLOR))
+    }
+  },
+  watch: {
+    'chart': {
+      handler: function() {
+        const chart = JSON.parse(JSON.stringify(this.chart))
+        if (chart.customStyle) {
+          const customStyle = JSON.parse(chart.customStyle)
+          if (customStyle.background) {
+            this.colorForm = customStyle.background
+          }
+        }
+      }
+    }
+  },
+  mounted() {
+  },
+  methods: {
+    changeBackgroundStyle() {
+      this.$emit('onChangeBackgroundForm', this.colorForm)
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.shape-item{
+  padding: 6px;
+  border: none;
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+.form-item-slider>>>.el-form-item__label{
+  font-size: 12px;
+  line-height: 38px;
+}
+.form-item>>>.el-form-item__label{
+  font-size: 12px;
+}
+.el-select-dropdown__item{
+  padding: 0 20px;
+}
+  span{
+    font-size: 12px
+  }
+  .el-form-item{
+    margin-bottom: 6px;
+  }
+</style>
diff --git a/frontend/src/views/chart/components/component-style/LegendSelector.vue b/frontend/src/views/chart/components/component-style/LegendSelector.vue
index b84cfd20bb..45c7233ec9 100644
--- a/frontend/src/views/chart/components/component-style/LegendSelector.vue
+++ b/frontend/src/views/chart/components/component-style/LegendSelector.vue
@@ -1,6 +1,6 @@
 <template>
   <div>
-    <div>
+    <div style="width: 100%">
       <el-popover
         placement="right"
         width="400"
@@ -33,7 +33,7 @@
               </el-select>
             </el-form-item>
             <el-form-item :label="$t('chart.text_color')" class="form-item">
-              <colorPicker v-model="legendForm.textStyle.color" style="padding-top: 6px;cursor: pointer;z-index: 999" @change="changeLegendStyle" />
+              <colorPicker v-model="legendForm.textStyle.color" style="margin-top: 6px;cursor: pointer;z-index: 999;border: solid 1px black" @change="changeLegendStyle" />
             </el-form-item>
             <el-form-item :label="$t('chart.text_h_position')" class="form-item">
               <el-radio-group v-model="legendForm.hPosition" size="mini" @change="changeLegendStyle">
@@ -121,6 +121,10 @@ export default {
 .shape-item{
   padding: 6px;
   border: none;
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
 }
 .form-item-slider>>>.el-form-item__label{
   font-size: 12px;
diff --git a/frontend/src/views/chart/components/component-style/TitleSelector.vue b/frontend/src/views/chart/components/component-style/TitleSelector.vue
index 8af38c639e..b86412b4d3 100644
--- a/frontend/src/views/chart/components/component-style/TitleSelector.vue
+++ b/frontend/src/views/chart/components/component-style/TitleSelector.vue
@@ -1,6 +1,6 @@
 <template>
   <div>
-    <div>
+    <div style="width: 100%">
       <el-popover
         placement="right"
         width="400"
@@ -17,7 +17,7 @@
               </el-select>
             </el-form-item>
             <el-form-item :label="$t('chart.text_color')" class="form-item">
-              <colorPicker v-model="titleForm.color" style="padding-top: 6px;cursor: pointer;z-index: 999" @change="changeTitleStyle" />
+              <colorPicker v-model="titleForm.color" style="margin-top: 6px;cursor: pointer;z-index: 999;border: solid 1px black" @change="changeTitleStyle" />
             </el-form-item>
             <el-form-item :label="$t('chart.text_h_position')" class="form-item">
               <el-radio-group v-model="titleForm.hPosition" size="mini" @change="changeTitleStyle">
@@ -100,6 +100,10 @@ export default {
 .shape-item{
   padding: 6px;
   border: none;
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
 }
 .form-item-slider>>>.el-form-item__label{
   font-size: 12px;
diff --git a/frontend/src/views/chart/components/component-style/XAxisSelector.vue b/frontend/src/views/chart/components/component-style/XAxisSelector.vue
index 2b8f156cde..84dfacbe0f 100644
--- a/frontend/src/views/chart/components/component-style/XAxisSelector.vue
+++ b/frontend/src/views/chart/components/component-style/XAxisSelector.vue
@@ -1,6 +1,6 @@
 <template>
   <div>
-    <div>
+    <div style="width: 100%">
       <el-popover
         placement="right"
         width="400"
@@ -78,6 +78,10 @@ export default {
 .shape-item{
   padding: 6px;
   border: none;
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
 }
 .form-item-slider>>>.el-form-item__label{
   font-size: 12px;
diff --git a/frontend/src/views/chart/components/component-style/YAxisSelector.vue b/frontend/src/views/chart/components/component-style/YAxisSelector.vue
index 48177d9953..c4f254b301 100644
--- a/frontend/src/views/chart/components/component-style/YAxisSelector.vue
+++ b/frontend/src/views/chart/components/component-style/YAxisSelector.vue
@@ -1,6 +1,6 @@
 <template>
   <div>
-    <div>
+    <div style="width: 100%">
       <el-popover
         placement="right"
         width="400"
@@ -78,6 +78,10 @@ export default {
 .shape-item{
   padding: 6px;
   border: none;
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
 }
 .form-item-slider>>>.el-form-item__label{
   font-size: 12px;
diff --git a/frontend/src/views/chart/components/shape-attr/ColorSelector.vue b/frontend/src/views/chart/components/shape-attr/ColorSelector.vue
index 30e566d61c..02fd2fa465 100644
--- a/frontend/src/views/chart/components/shape-attr/ColorSelector.vue
+++ b/frontend/src/views/chart/components/shape-attr/ColorSelector.vue
@@ -1,6 +1,6 @@
 <template>
   <div>
-    <div>
+    <div style="width: 100%">
       <el-popover
         placement="right"
         width="400"
@@ -130,6 +130,10 @@ export default {
 .shape-item{
   padding: 6px;
   border: none;
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+  align-items: center
 }
 .form-item-slider>>>.el-form-item__label{
   font-size: 12px;
diff --git a/frontend/src/views/chart/components/shape-attr/LabelSelector.vue b/frontend/src/views/chart/components/shape-attr/LabelSelector.vue
index c68e81274b..41612bbbd0 100644
--- a/frontend/src/views/chart/components/shape-attr/LabelSelector.vue
+++ b/frontend/src/views/chart/components/shape-attr/LabelSelector.vue
@@ -1,6 +1,6 @@
 <template>
   <div>
-    <div>
+    <div style="width: 100%">
       <el-popover
         placement="right"
         width="400"
@@ -17,7 +17,7 @@
               </el-select>
             </el-form-item>
             <el-form-item :label="$t('chart.text_color')" class="form-item">
-              <colorPicker v-model="labelForm.color" style="padding-top: 6px;cursor: pointer;z-index: 999" @change="changeLabelAttr" />
+              <colorPicker v-model="labelForm.color" style="margin-top: 6px;cursor: pointer;z-index: 999;border: solid 1px black" @change="changeLabelAttr" />
             </el-form-item>
             <el-form-item :label="$t('chart.label_position')" class="form-item">
               <el-radio-group v-model="labelForm.position" size="mini" @change="changeLabelAttr">
@@ -29,7 +29,7 @@
               </el-radio-group>
             </el-form-item>
             <el-form-item :label="$t('chart.content_formatter')" class="form-item">
-              <el-input v-model="labelForm.formatter" type="textarea" :autosize="{ minRows: 4, maxRows: 4}" @blur="changeLabelAttr"/>
+              <el-input v-model="labelForm.formatter" type="textarea" :autosize="{ minRows: 4, maxRows: 4}" @blur="changeLabelAttr" />
             </el-form-item>
           </el-form>
         </el-col>
@@ -92,10 +92,14 @@ export default {
 </script>
 
 <style scoped lang="scss">
-.shape-item{
-  padding: 6px;
-  border: none;
-}
+  .shape-item{
+    padding: 6px;
+    border: none;
+    width: 100%;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
 .form-item-slider>>>.el-form-item__label{
   font-size: 12px;
   line-height: 38px;
diff --git a/frontend/src/views/chart/components/shape-attr/SizeSelector.vue b/frontend/src/views/chart/components/shape-attr/SizeSelector.vue
index 771d730b03..0943446a16 100644
--- a/frontend/src/views/chart/components/shape-attr/SizeSelector.vue
+++ b/frontend/src/views/chart/components/shape-attr/SizeSelector.vue
@@ -1,6 +1,6 @@
 <template>
   <div>
-    <div>
+    <div style="width: 100%">
       <el-popover
         placement="right"
         width="400"
@@ -134,6 +134,10 @@ export default {
 .shape-item{
   padding: 6px;
   border: none;
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
 }
 .form-item-slider>>>.el-form-item__label{
   font-size: 12px;
diff --git a/frontend/src/views/chart/components/shape-attr/TooltipSelector.vue b/frontend/src/views/chart/components/shape-attr/TooltipSelector.vue
index 58b1697aa5..c7f45b8f2a 100644
--- a/frontend/src/views/chart/components/shape-attr/TooltipSelector.vue
+++ b/frontend/src/views/chart/components/shape-attr/TooltipSelector.vue
@@ -1,6 +1,6 @@
 <template>
   <div>
-    <div>
+    <div style="width: 100%">
       <el-popover
         placement="right"
         width="400"
@@ -23,7 +23,7 @@
               </el-select>
             </el-form-item>
             <el-form-item :label="$t('chart.text_color')" class="form-item">
-              <colorPicker v-model="tooltipForm.textStyle.color" style="padding-top: 6px;cursor: pointer;z-index: 999" @change="changeTooltipAttr" />
+              <colorPicker v-model="tooltipForm.textStyle.color" style="margin-top: 6px;cursor: pointer;z-index: 999;border: solid 1px black" @change="changeTooltipAttr" />
             </el-form-item>
             <el-form-item :label="$t('chart.content_formatter')" class="form-item">
               <el-input v-model="tooltipForm.formatter" type="textarea" :autosize="{ minRows: 4, maxRows: 4}" :placeholder="$t('chart.formatter_plc')" @blur="changeTooltipAttr" />
@@ -92,6 +92,10 @@ export default {
 .shape-item{
   padding: 6px;
   border: none;
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
 }
 .form-item-slider>>>.el-form-item__label{
   font-size: 12px;
diff --git a/frontend/src/views/chart/group/Group.vue b/frontend/src/views/chart/group/Group.vue
index 718c767c31..2b62b520f4 100644
--- a/frontend/src/views/chart/group/Group.vue
+++ b/frontend/src/views/chart/group/Group.vue
@@ -149,7 +149,7 @@
       >
         <span slot-scope="{ node, data }" class="custom-tree-node">
           <span>
-            <span>({{ data.type }})</span>
+            <span><svg-icon :icon-class="data.type" /></span>
             <span style="margin-left: 6px">{{ data.name }}</span>
           </span>
           <span>
@@ -217,7 +217,10 @@ import {
   DEFAULT_LEGEND_STYLE,
   DEFAULT_SIZE,
   DEFAULT_TITLE_STYLE,
-  DEFAULT_TOOLTIP
+  DEFAULT_TOOLTIP,
+  DEFAULT_XAXIS_STYLE,
+  DEFAULT_YAXIS_STYLE,
+  DEFAULT_BACKGROUND_COLOR
 } from '../chart/chart'
 
 export default {
@@ -520,7 +523,10 @@ export default {
       })
       view.customStyle = JSON.stringify({
         text: DEFAULT_TITLE_STYLE,
-        legend: DEFAULT_LEGEND_STYLE
+        legend: DEFAULT_LEGEND_STYLE,
+        xAxis: DEFAULT_XAXIS_STYLE,
+        yAxis: DEFAULT_YAXIS_STYLE,
+        background: DEFAULT_BACKGROUND_COLOR
       })
       view.customFilter = JSON.stringify({})
       post('/chart/view/save', view).then(response => {
diff --git a/frontend/src/views/chart/view/ChartEdit.vue b/frontend/src/views/chart/view/ChartEdit.vue
index 996e3508a9..238cb6bfe6 100644
--- a/frontend/src/views/chart/view/ChartEdit.vue
+++ b/frontend/src/views/chart/view/ChartEdit.vue
@@ -87,7 +87,7 @@
                   <el-radio value="bar" label="bar"><svg-icon icon-class="bar" class="chart-icon" /></el-radio>
                   <el-radio value="bar-stack" label="bar-stack"><svg-icon icon-class="bar-stack" class="chart-icon" /></el-radio>
                   <el-radio value="bar-horizontal" label="bar-horizontal"><svg-icon icon-class="bar-horizontal" class="chart-icon" /></el-radio>
-                  <el-radio value="bar-horizontal-stack" label="bar-horizontal-stack"><svg-icon icon-class="bar-stack-horizontal" class="chart-icon" /></el-radio>
+                  <el-radio value="bar-stack-horizontal" label="bar-stack-horizontal"><svg-icon icon-class="bar-stack-horizontal" class="chart-icon" /></el-radio>
                   <el-radio value="line" label="line"><svg-icon icon-class="line" class="chart-icon" /></el-radio>
                 </div>
                 <div style="width: 100%;display: flex;display: -webkit-flex;justify-content: space-between;flex-direction: row;flex-wrap: wrap;">
@@ -114,6 +114,7 @@
               <legend-selector class="attr-selector" :chart="chart" @onLegendChange="onLegendChange" />
               <x-axis-selector v-if="view.type.includes('bar') || view.type.includes('line')" class="attr-selector" :chart="chart" @onChangeXAxisForm="onChangeXAxisForm" />
               <y-axis-selector v-if="view.type.includes('bar') || view.type.includes('line')" class="attr-selector" :chart="chart" @onChangeYAxisForm="onChangeYAxisForm" />
+              <background-color-selector class="attr-selector" :chart="chart" @onChangeBackgroundForm="onChangeBackgroundForm" />
             </el-tab-pane>
           </el-tabs>
         </div>
@@ -192,7 +193,10 @@ import {
   DEFAULT_TITLE_STYLE,
   DEFAULT_LEGEND_STYLE,
   DEFAULT_LABEL,
-  DEFAULT_TOOLTIP
+  DEFAULT_TOOLTIP,
+  DEFAULT_XAXIS_STYLE,
+  DEFAULT_YAXIS_STYLE,
+  DEFAULT_BACKGROUND_COLOR
 } from '../chart/chart'
 import ColorSelector from '../components/shape-attr/ColorSelector'
 import SizeSelector from '../components/shape-attr/SizeSelector'
@@ -202,10 +206,11 @@ import LegendSelector from '../components/component-style/LegendSelector'
 import TooltipSelector from '../components/shape-attr/TooltipSelector'
 import XAxisSelector from '../components/component-style/XAxisSelector'
 import YAxisSelector from '../components/component-style/YAxisSelector'
+import BackgroundColorSelector from '../components/component-style/BackgroundColorSelector'
 
 export default {
   name: 'ChartEdit',
-  components: { FilterItem, XAxisSelector, YAxisSelector, TooltipSelector, LabelSelector, LegendSelector, TitleSelector, SizeSelector, ColorSelector, ChartComponent, QuotaItem, DimensionItem, draggable },
+  components: { BackgroundColorSelector, FilterItem, XAxisSelector, YAxisSelector, TooltipSelector, LabelSelector, LegendSelector, TitleSelector, SizeSelector, ColorSelector, ChartComponent, QuotaItem, DimensionItem, draggable },
   data() {
     return {
       table: {},
@@ -225,7 +230,10 @@ export default {
         },
         customStyle: {
           text: DEFAULT_TITLE_STYLE,
-          legend: DEFAULT_LEGEND_STYLE
+          legend: DEFAULT_LEGEND_STYLE,
+          xAxis: DEFAULT_XAXIS_STYLE,
+          yAxis: DEFAULT_YAXIS_STYLE,
+          background: DEFAULT_BACKGROUND_COLOR
         },
         customFilter: []
       },
@@ -477,6 +485,11 @@ export default {
     onChangeYAxisForm(val) {
       this.view.customStyle.yAxis = val
       this.save()
+    },
+
+    onChangeBackgroundForm(val) {
+      this.view.customStyle.background = val
+      this.save()
     }
   }
 }