Merge branch 'dev' of github.com:dataease/dataease into dev

frontend/src/views/chart/chart/bar/bar_antv.js

@@ -10,6 +10,7 @@ import {
   getSlider,
   getAnalyse
 } from '@/views/chart/chart/common/common_antv'
+import { antVCustomColor } from '@/views/chart/chart/util'
 
 export function baseBarOptionAntV(plot, container, chart, action, isGroup, isStack) {
   // theme
@@ -98,6 +99,8 @@ export function baseBarOptionAntV(plot, container, chart, action, isGroup, isSta
   } else {
     delete options.isStack
   }
+  // custom color
+  options.color = antVCustomColor(chart)
 
   // 开始渲染
   if (plot) {
@@ -198,6 +201,8 @@ export function hBaseBarOptionAntV(plot, container, chart, action, isGroup, isSt
   } else {
     delete options.isStack
   }
+  // custom color
+  options.color = antVCustomColor(chart)
 
   // 开始渲染
   if (plot) {

frontend/src/views/chart/chart/funnel/funnel_antv.js

 import { getLabel, getLegend, getPadding, getTheme, getTooltip } from '@/views/chart/chart/common/common_antv'
 import { Funnel } from '@antv/g2plot'
+import { antVCustomColor } from '@/views/chart/chart/util'
 
 export function baseFunnelOptionAntV(plot, container, chart, action) {
   // theme
@@ -62,6 +63,8 @@ export function baseFunnelOptionAntV(plot, container, chart, action) {
       const s = JSON.parse(JSON.stringify(customAttr.size))
     }
   }
+  // custom color
+  options.color = antVCustomColor(chart)
 
   // 开始渲染
   if (plot) {

frontend/src/views/chart/chart/line/line_antv.js

@@ -10,6 +10,7 @@ import {
   getSlider,
   getAnalyse
 } from '@/views/chart/chart/common/common_antv'
+import { antVCustomColor } from '@/views/chart/chart/util'
 
 export function baseLineOptionAntV(plot, container, chart, action) {
   // theme
@@ -90,6 +91,8 @@ export function baseLineOptionAntV(plot, container, chart, action) {
       }
     }
   }
+  // custom color
+  options.color = antVCustomColor(chart)
 
   // 开始渲染
   if (plot) {
@@ -184,6 +187,8 @@ export function baseAreaOptionAntV(plot, container, chart, action) {
       }
     }
   }
+  // custom color
+  options.color = antVCustomColor(chart)
 
   // 开始渲染
   if (plot) {

frontend/src/views/chart/chart/pie/pie_antv.js

@@ -7,6 +7,7 @@ import {
 } from '@/views/chart/chart/common/common_antv'
 
 import { Pie, Rose } from '@antv/g2plot'
+import { antVCustomColor } from '@/views/chart/chart/util'
 
 export function basePieOptionAntV(plot, container, chart, action) {
   // theme
@@ -84,6 +85,8 @@ export function basePieOptionAntV(plot, container, chart, action) {
       options.innerRadius = parseFloat(parseInt(s.pieInnerRadius) / 100)
     }
   }
+  // custom color
+  options.color = antVCustomColor(chart)
 
   // 开始渲染
   if (plot) {
@@ -165,6 +168,8 @@ export function basePieRoseOptionAntV(plot, container, chart, action) {
       options.innerRadius = parseFloat(parseInt(s.pieInnerRadius) / 100)
     }
   }
+  // custom color
+  options.color = antVCustomColor(chart)
 
   // 开始渲染
   if (plot) {

frontend/src/views/chart/chart/radar/radar_antv.js

 import { getLabel, getLegend, getPadding, getTheme, getTooltip } from '@/views/chart/chart/common/common_antv'
 import { Radar } from '@antv/g2plot'
+import { antVCustomColor } from '@/views/chart/chart/util'
 
 export function baseRadarOptionAntV(plot, container, chart, action) {
   // theme
@@ -132,6 +133,9 @@ export function baseRadarOptionAntV(plot, container, chart, action) {
   options.xAxis = xAxis
   options.yAxis = yAxis
 
+  // custom color
+  options.color = antVCustomColor(chart)
+
   // 开始渲染
   if (plot) {
     plot.destroy()

frontend/src/views/chart/chart/scatter/scatter_antv.js

@@ -11,6 +11,7 @@ import {
 } from '@/views/chart/chart/common/common_antv'
 
 import { Scatter } from '@antv/g2plot'
+import { antVCustomColor } from '@/views/chart/chart/util'
 
 export function baseScatterOptionAntV(plot, container, chart, action) {
   // theme
@@ -86,6 +87,8 @@ export function baseScatterOptionAntV(plot, container, chart, action) {
       options.shape = s.scatterSymbol
     }
   }
+  // custom color
+  options.color = antVCustomColor(chart)
 
   // 开始渲染
   if (plot) {

frontend/src/views/chart/chart/util.js

@@ -397,7 +397,7 @@ export const TYPE_CONFIGS = [
       'color-selector',
       'size-selector',
       'label-selector',
-      'title-selector',
+      'title-selector'
     ]
   },
 
@@ -665,3 +665,124 @@ export function customSort(custom, data) {
 
   return joinArr.concat(subArr)
 }
+
+export function customColor(custom, res, colors) {
+  const result = []
+  for (let i = 0; i < res.length; i++) {
+    const r = res[i]
+    let flag = false
+    for (let j = 0; j < custom.length; j++) {
+      const c = custom[j]
+      if (r.name === c.name) {
+        flag = true
+        result.push(c)
+      }
+    }
+    if (!flag) {
+      result.push(r)
+    }
+  }
+  return result
+}
+
+export function getColors(chart, colors, reset) {
+  // 自定义颜色，先按照没有设定的情况，并排好序，当做最终结果
+  let seriesColors = []
+  let series
+  if (chart.type.includes('stack')) {
+    if (chart.data) {
+      const data = chart.data.datas
+      const stackData = []
+      for (let i = 0; i < data.length; i++) {
+        const s = data[i]
+        stackData.push(s.category)
+      }
+      const sArr = stackData.filter(function(item, index, stackData) {
+        return stackData.indexOf(item, 0) === index
+      })
+
+      for (let i = 0; i < sArr.length; i++) {
+        const s = sArr[i]
+        seriesColors.push({
+          name: s,
+          color: colors[i % colors.length],
+          isCustom: false
+        })
+      }
+    }
+  } else if (chart.type.includes('bar') || chart.type.includes('line') || chart.type.includes('scatter') || chart.type.includes('radar')) {
+    if (Object.prototype.toString.call(chart.yaxis) === '[object Array]') {
+      series = JSON.parse(JSON.stringify(chart.yaxis))
+    } else {
+      series = JSON.parse(chart.yaxis)
+    }
+    for (let i = 0; i < series.length; i++) {
+      const s = series[i]
+      seriesColors.push({
+        name: s.name,
+        color: colors[i % colors.length],
+        isCustom: false
+      })
+    }
+  } else {
+    if (chart.data) {
+      const data = chart.data.datas
+      // data 的维度值，需要根据自定义顺序排序
+      // let customSortData
+      // if (Object.prototype.toString.call(chart.customSort) === '[object Array]') {
+      //   customSortData = JSON.parse(JSON.stringify(chart.customSort))
+      // } else {
+      //   customSortData = JSON.parse(chart.customSort)
+      // }
+      // if (customSortData && customSortData.length > 0) {
+      //   data = customSort(customSortData, data)
+      // }
+
+      for (let i = 0; i < data.length; i++) {
+        const s = data[i]
+        seriesColors.push({
+          name: s.field,
+          color: colors[i % colors.length],
+          isCustom: false
+        })
+      }
+    }
+  }
+  // 如果有自定义，则与上述中的结果合并。
+  // res，custom，以custom为准，去掉res中不存在的，并将custom中name一样的color赋值给res，不存在的name，即新增值，使用i % colors.length，从配色方案中选
+  if (!reset) {
+    let sc = null
+    if (Object.prototype.toString.call(chart.customAttr) === '[object Object]') {
+      sc = JSON.parse(JSON.stringify(chart.customAttr)).color.seriesColors
+    } else {
+      sc = JSON.parse(chart.customAttr).color.seriesColors
+    }
+    if (sc && sc.length > 0) {
+      seriesColors = customColor(sc, seriesColors)
+    }
+    // 根据isCustom字段，修正color
+    for (let i = 0; i < seriesColors.length; i++) {
+      if (!seriesColors[i].isCustom) {
+        seriesColors[i].color = colors[i % colors.length]
+      }
+    }
+  }
+  return seriesColors
+}
+
+export function antVCustomColor(chart) {
+  const colors = []
+  if (chart.customAttr) {
+    const customAttr = JSON.parse(chart.customAttr)
+    // color
+    if (customAttr.color) {
+      const c = JSON.parse(JSON.stringify(customAttr.color))
+
+      const customColors = getColors(chart, c.colors, false)
+      for (let i = 0; i < customColors.length; i++) {
+        colors.push(hexColorToRGBA(customColors[i].color, c.alpha))
+      }
+    }
+  }
+  return colors
+}

frontend/src/views/chart/group/Group.vue

@@ -822,6 +822,7 @@ export default {
       view.customFilter = JSON.stringify([])
       view.drillFields = JSON.stringify([])
       view.extBubble = JSON.stringify([])
+      view.viewFields = JSON.stringify([])
       this.setChartDefaultOptions(view)
       const _this = this
       post('/chart/view/newOne/' + this.panelInfo.id, view, true).then(response => {

frontend/src/views/chart/view/ChartEdit.vue

@@ -652,11 +652,13 @@
         </el-tab-pane>
         <el-tab-pane :label="$t('chart.chart_style')" class="padding-tab" style="width: 300px">
           <chart-style
-            v-if="chartProperties"
+            v-if="chartProperties || view.isPlugin"
             :param="param"
             :view="view"
             :chart="chart"
             :properties="chartProperties"
+            :dimension-data="dimensionData"
+            :quota-data="quotaData"
             @calcStyle="calcStyle"
             @onColorChange="onColorChange"
             @onSizeChange="onSizeChange"
@@ -1082,6 +1084,7 @@ export default {
         yaxisExt: [],
         extStack: [],
         drillFields: [],
+        viewFields: [],
         extBubble: [],
         show: true,
         type: 'bar',
@@ -1172,12 +1175,12 @@ export default {
       if (_this.chart && _this.chart.render) {
         const viewConfig = this.allViewRender.filter(item => item.render === _this.chart.render && item.value === _this.chart.type)
         if (viewConfig && viewConfig.length) {
-          return viewConfig[0].properties
+          return viewConfig[0].properties || []
         } else {
-          return null
+          return []
         }
       } else {
-        return null
+        return []
       }
     },
     chartType() {
@@ -1528,6 +1531,7 @@ export default {
       this.view = JSON.parse(JSON.stringify(view))
       // stringify json param
       view.xaxis = JSON.stringify(view.xaxis)
+      view.viewFields = JSON.stringify(view.viewFields)
       view.xaxisExt = JSON.stringify(view.xaxisExt)
       view.yaxis = JSON.stringify(view.yaxis)
       view.yaxisExt = JSON.stringify(view.yaxisExt)
@@ -1587,6 +1591,7 @@ export default {
       const view = this.buildParam(true, 'chart', false, switchType)
       if (!view) return
       viewEditSave(this.panelInfo.id, view).then(() => {
+        this.getData(this.param.id)
         bus.$emit('view-in-cache', { type: 'propChange', viewId: this.param.id })
       })
     },
@@ -1595,6 +1600,7 @@ export default {
       // 将视图传入echart...组件
       const view = JSON.parse(JSON.stringify(this.view))
       view.xaxis = JSON.stringify(this.view.xaxis)
+      view.viewFields = JSON.stringify(this.view.viewFields)
       view.xaxisExt = JSON.stringify(this.view.xaxisExt)
       view.yaxis = JSON.stringify(this.view.yaxis)
       view.yaxisExt = JSON.stringify(this.view.yaxisExt)
@@ -1659,6 +1665,7 @@ export default {
         }).then(response => {
           this.initTableData(response.data.tableId)
           this.view = JSON.parse(JSON.stringify(response.data))
+          this.view.viewFields = this.view.viewFields ? JSON.parse(this.view.viewFields) : []
           this.view.xaxis = this.view.xaxis ? JSON.parse(this.view.xaxis) : []
           this.view.xaxisExt = this.view.xaxisExt ? JSON.parse(this.view.xaxisExt) : []
           this.view.yaxis = this.view.yaxis ? JSON.parse(this.view.yaxis) : []
@@ -1709,6 +1716,7 @@ export default {
               this.initTableData(response.data.tableId)
             }
             this.view = JSON.parse(JSON.stringify(response.data))
+            this.view.viewFields = this.view.viewFields ? JSON.parse(this.view.viewFields) : []
             this.view.xaxis = this.view.xaxis ? JSON.parse(this.view.xaxis) : []
             this.view.xaxisExt = this.view.xaxisExt ? JSON.parse(this.view.xaxisExt) : []
             this.view.yaxis = this.view.yaxis ? JSON.parse(this.view.yaxis) : []
@@ -2369,7 +2377,7 @@ export default {
       resetViewCacheCallBack(_this.param.id, _this.panelInfo.id, function(rsp) {
         _this.changeEditStatus(false)
         _this.getChart(_this.param.id, 'panel')
-        // _this.getData(_this.param.id)
+        _this.getData(_this.param.id)
         bus.$emit('view-in-cache', { type: 'propChange', viewId: _this.param.id })
       })
     },
@@ -2405,6 +2413,8 @@ export default {
           this.view.customAttr.label.position = 'middle'
         }
       }
+      // reset custom colors
+      this.view.customAttr.color.seriesColors = []
     },
 
     valueFormatter(item) {

frontend/src/views/chart/view/ChartStyle.vue

@@ -5,7 +5,7 @@
       style="overflow:auto;border-right: 1px solid #e6e6e6;height: 100%;width: 100%;"
       class="attr-style theme-border-class"
       :component-name="view.type + '-style'"
-      :obj="{view, param, chart}"
+      :obj="{view, param, chart, dimensionData, quotaData}"
     />
     <div
       v-else
@@ -30,7 +30,15 @@
         <span class="padding-lr">{{ $t('chart.shape_attr') }}</span>
         <el-collapse v-model="attrActiveNames" class="style-collapse">
           <el-collapse-item name="color" :title="$t('chart.color')">
+            <color-selector-ext
+              v-if="view.render && view.render === 'antv' && (view.type.includes('bar') || view.type.includes('line') || view.type.includes('pie') || view.type === 'funnel' || view.type === 'radar' || view.type === 'scatter')"
+              :param="param"
+              class="attr-selector"
+              :chart="chart"
+              @onColorChange="onColorChange"
+            />
             <color-selector
+              v-else
               :param="param"
               class="attr-selector"
               :chart="chart"
@@ -254,6 +262,7 @@
 <script>
 import PluginCom from '@/views/system/plugin/PluginCom'
 import ColorSelector from '@/views/chart/components/shape-attr/ColorSelector'
+import ColorSelectorExt from '@/views/chart/components/shape-attr/ColorSelectorExt'
 import SizeSelector from '@/views/chart/components/shape-attr/SizeSelector'
 import SizeSelectorAntV from '@/views/chart/components/shape-attr/SizeSelectorAntV'
 import LabelSelector from '@/views/chart/components/shape-attr/LabelSelector'
@@ -295,7 +304,13 @@ export default {
     TotalCfg,
     TooltipSelectorAntV,
     TooltipSelector,
-    LabelSelectorAntV, LabelSelector, SizeSelectorAntV, SizeSelector, ColorSelector, PluginCom
+    LabelSelectorAntV,
+    LabelSelector,
+    SizeSelectorAntV,
+    SizeSelector,
+    ColorSelector,
+    PluginCom,
+    ColorSelectorExt
   },
   props: {
     chart: {
@@ -313,6 +328,14 @@ export default {
     properties: {
       type: Array,
       required: true
+    },
+    dimensionData: {
+      type: Array,
+      required: true
+    },
+    quotaData: {
+      type: Array,
+      required: true
     }
   },
   data() {
@@ -331,7 +354,7 @@ export default {
   },
   methods: {
     showProperties(property) {
-      return this.properties.includes(property)
+      return this.properties && this.properties.length && this.properties.includes(property)
     },
     showPropertiesCollapse(propertiesInfo) {
       let includeCount = 0