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

README.md

@@ -13,7 +13,7 @@ DataEase 是开源的数据可视化分析工具，帮助用户快速分析数
 ### DataEase 的功能：
 
 -   图表展示：支持 PC 端、移动端及大屏;
--   图表制作：支持丰富的图表类型(基于 Apache ECharts 实现)、支持拖拉拽方式快速制作仪表板;
+-   图表制作：支持丰富的图表类型(Apache ECharts / AntV)、支持拖拉拽方式快速制作仪表板;
 -   数据引擎：支持直连模式、本地模式(基于 Apache Doris / Kettle 实现);
 -   数据连接：支持关系型数据库、Excel 等文件、Hadoop 等大数据平台、NoSQL 等各种数据源。
 
@@ -35,6 +35,8 @@ DataEase 是开源的数据可视化分析工具，帮助用户快速分析数
 - MariaDB
 - Apache Doris
 - ClickHouse
+- MongoDB
+- Amazon Redshift
 
 > 更多数据源支持持续增加中...
 
@@ -73,7 +75,7 @@ curl -sSL https://github.com/dataease/dataease/releases/latest/download/quick_st
 ## 技术栈
 
 -   后端：[Spring Boot](https://spring.io/projects/spring-boot)
--   前端：[Vue.js](https://vuejs.org/)、[Element](https://element.eleme.cn/)
+-   前端：[Vue.js](https://vuejs.org/)、[Element](https://element.eleme.cn/)、[Apache ECharts](https://github.com/apache/echarts)、[AntV](https://antv.vision/zh)
 -   中间件：[MySQL](https://www.mysql.com/)
 -   数据处理：[Kettle](https://github.com/pentaho/pentaho-kettle)、[Apache Doris](https://github.com/apache/incubator-doris/)
 -   基础设施：[Docker](https://www.docker.com/)

frontend/src/components/DeDrag/index.vue

@@ -444,7 +444,7 @@ export default {
     style() {
       // console.log('style-top:' + this.y + '--' + this.top)
       return {
-        padding: (this.canvasStyleData.panel.gap === 'yes' ? this.componentGap : 0) + 'px',
+        padding: this.curGap + 'px',
         transform: `translate(${this.left}px, ${this.top}px) rotate(${this.rotate}deg)`,
         width: this.computedWidth,
         height: this.computedHeight,
@@ -487,7 +487,6 @@ export default {
 
     //  根据left right 算出元素的宽度
     computedMainSlotWidth() {
-      const gap = (this.canvasStyleData.panel.gap === 'yes' ? this.componentGap : 0) * 2
       if (this.w === 'auto') {
         if (!this.widthTouched) {
           return 'auto'
@@ -495,14 +494,13 @@ export default {
       }
       if (this.element.auxiliaryMatrix) {
         const width = Math.round(this.width / this.curCanvasScale.matrixStyleWidth) * this.curCanvasScale.matrixStyleWidth
-        return (width - gap) + 'px'
+        return (width - this.curGap * 2) + 'px'
       } else {
-        return (this.width - gap) + 'px'
+        return (this.width - this.curGap * 2) + 'px'
       }
     },
     // 根据top bottom 算出元素的宽度
     computedMainSlotHeight() {
-      const gap = (this.canvasStyleData.panel.gap === 'yes' ? this.componentGap : 0) * 2
       if (this.h === 'auto') {
         if (!this.heightTouched) {
           return 'auto'
@@ -510,9 +508,9 @@ export default {
       }
       if (this.element.auxiliaryMatrix) {
         const height = Math.round(this.height / this.curCanvasScale.matrixStyleHeight) * this.curCanvasScale.matrixStyleHeight
-        return (height - gap) + 'px'
+        return (height - this.curGap * 2) + 'px'
       } else {
-        return (this.height - gap) + 'px'
+        return (this.height - this.curGap * 2) + 'px'
       }
     },
 
@@ -528,6 +526,9 @@ export default {
     curComponent() {
       return this.$store.state.curComponent
     },
+    curGap() {
+      return this.canvasStyleData.panel.gap === 'yes' && this.element.auxiliaryMatrix ? this.componentGap : 0
+    },
     ...mapState([
       'editor',
       'curCanvasScale',

frontend/src/components/canvas/components/Editor/ComponentWrapper.vue

 <template>
   <div
     :style="getOutStyleDefault(config.style)"
-    :class="{'gap_class':canvasStyleData.panel.gap==='yes'}"
     class="component"
     @click="handleClick"
     @mousedown="elementMouseDown"
@@ -66,9 +65,13 @@ export default {
     }
   },
   computed: {
+    curGap() {
+      return this.canvasStyleData.panel.gap === 'yes' && this.config.auxiliaryMatrix ? this.componentGap : 0
+    },
     ...mapState([
       'canvasStyleData',
-      'curComponent'
+      'curComponent',
+      'componentGap'
     ])
   },
   mounted() {
@@ -101,7 +104,9 @@ export default {
       return value * scale / 100
     },
     getOutStyleDefault(style) {
-      const result = {};
+      const result = {
+        padding: this.curGap + 'px'
+      };
       ['width', 'left'].forEach(attr => {
         result[attr] = style[attr] + 'px'
       });

frontend/src/components/canvas/components/Editor/Preview.vue

 <template>
-  <div id="canvasInfoMain" ref="canvasInfoMain" class="main-class">
-    <div id="canvasInfoTemp" ref="canvasInfoTemp" :style="customStyle" class="bg" @mouseup="deselectCurComponent" @mousedown="handleMouseDown">
+  <div id="canvasInfoMain" ref="canvasInfoMain" :style="customStyle" class="bg">
+    <div id="canvasInfoTemp" ref="canvasInfoTemp" class="main-class" @mouseup="deselectCurComponent" @mousedown="handleMouseDown">
       <el-row v-if="componentDataShow.length===0" style="height: 100%;" class="custom-position">
         {{ $t('panel.panelNull') }}
       </el-row>
@@ -95,9 +95,7 @@ export default {
   computed: {
     customStyle() {
       let style = {
-        margin: 'auto',
-        width: this.mainWidth,
-        height: this.mainHeight
+        padding: this.componentGap + 'px'
       }
       if (this.canvasStyleData.openCommonStyle) {
         if (this.canvasStyleData.panel.backgroundType === 'image' && this.canvasStyleData.panel.imageUrl) {
@@ -132,7 +130,8 @@ export default {
       'isClickComponent',
       'curComponent',
       'componentData',
-      'canvasStyleData'
+      'canvasStyleData',
+      'componentGap'
     ])
   },
   watch: {
@@ -192,15 +191,6 @@ export default {
       const canvasWidth = document.getElementById('canvasInfoMain').offsetWidth
       this.scaleWidth = canvasWidth * 100 / parseInt(this.canvasStyleData.width)// 获取宽度比
       this.scaleHeight = canvasHeight * 100 / parseInt(this.canvasStyleData.height)// 获取高度比
-
-      // console.log('scaleHeight:' + this.scaleHeight + ';ch:' + this.canvasStyleData.height)
-
-      // this.scaleHeight = this.scaleWidth
-      // this.mainHeight = this.canvasStyleData.height * this.scaleHeight / 100 + 'px'
-      // if (this.showType === 'width') {
-      //   this.scaleHeight = this.scaleWidth
-      //   this.mainHeight = this.canvasStyleData.height * this.scaleHeight / 100 + 'px'
-      // }
       this.handleScaleChange()
     },
     resetID(data) {

frontend/src/components/canvas/components/Editor/index.vue

@@ -982,7 +982,8 @@ export default {
       'editor',
       'linkageSettingStatus',
       'curLinkageView',
-      'doSnapshotIndex'
+      'doSnapshotIndex',
+      'componentGap'
     ])
   },
   watch: {

frontend/src/components/canvas/components/TextAttr.vue

@@ -108,7 +108,7 @@
             <i class="icon iconfont icon-zimua" @click="goColor" />
           </el-tooltip>
           <div :style="letterDivColor" />
-          <el-color-picker ref="colorPicker" v-model="styleInfo.color" style="margin-top: 7px;height: 0px" size="mini" @change="styleChange" />
+          <el-color-picker ref="colorPicker" v-model="styleInfo.color" style="margin-top: 7px;height: 0px" size="mini" :predefine="predefineColors" @change="styleChange" />
         </div>
       </div>
       <div v-if="attrShow('borderColor')" style="width: 20px;float: left;margin-top: 2px;margin-left: 10px;">
@@ -117,7 +117,7 @@
             <i class="iconfont icon-huabi" @click="goBoardColor" />
           </el-tooltip>
           <div :style="boardDivColor" />
-          <el-color-picker ref="boardColorPicker" v-model="styleInfo.borderColor" style="margin-top: 7px;height: 0px" size="mini" @change="styleChange" />
+          <el-color-picker ref="boardColorPicker" v-model="styleInfo.borderColor" style="margin-top: 7px;height: 0px" size="mini" :predefine="predefineColors" @change="styleChange" />
         </div>
       </div>
 
@@ -127,7 +127,7 @@
             <i class="iconfont icon-beijingse1" @click="goBackgroundColor" />
           </el-tooltip>
           <div :style="backgroundDivColor" />
-          <el-color-picker ref="backgroundColorPicker" v-model="styleInfo.backgroundColor" style="margin-top: 7px;height: 0px" size="mini" @change="styleChange" />
+          <el-color-picker ref="backgroundColorPicker" v-model="styleInfo.backgroundColor" style="margin-top: 7px;height: 0px" :predefine="predefineColors" size="mini" @change="styleChange" />
         </div>
       </div>
 
@@ -157,6 +157,7 @@ import { mapState } from 'vuex'
 import Hyperlinks from '@/components/canvas/components/Editor/Hyperlinks'
 import VideoLinks from '@/components/canvas/components/Editor/VideoLinks'
 import DateFormat from '@/components/canvas/components/Editor/DateFormat'
+import { COLOR_PANEL } from '@/views/chart/chart/chart'
 
 export default {
   components: { Hyperlinks, DateFormat, VideoLinks },
@@ -172,6 +173,7 @@ export default {
   },
   data() {
     return {
+      predefineColors: COLOR_PANEL,
       showMain: true,
       innerOpacity: 0,
       textAlignOptions: [
@@ -431,4 +433,8 @@ export default {
     padding: 5px!important;
     width: 30px!important;
   }
+
+  ::v-deep .el-color-dropdown__link-btn {
+    display: inline!important;
+  }
 </style>

frontend/src/components/canvas/components/Toolbar.vue

@@ -12,33 +12,6 @@
       </span>
     </div>
     <div v-else class="toolbar">
-      <!--      <div class="canvas-config" style="margin-right: 10px">-->
-      <!--        <span>{{ $t('panel.new_element_distribution') }}:</span>-->
-      <!--        <el-switch-->
-      <!--          v-model="canvasStyleData.auxiliaryMatrix"-->
-      <!--          :width="35"-->
-      <!--          active-color="#13ce66"-->
-      <!--          inactive-color="#ff4949"-->
-      <!--          :active-text="$t('panel.matrix')"-->
-      <!--          :inactive-text="$t('panel.suspension')"-->
-      <!--        />-->
-      <!--      </div>-->
-      <!--      <div class="canvas-config" style="margin-right: 10px" @click.stop="auxiliaryMatrixChange">-->
-      <!--        <span>{{ $t('panel.new_element_distribution.matrix_design') }}:</span>-->
-      <!--        <span v-if="curComponent.auxiliaryMatrix">-->
-      <!--          <i class="icon iconfont icon-shujujuzhen" />-->
-      <!--          {{ $t('panel.matrix_design') }}-->
-      <!--        </span>-->
-      <!--        <span v-if="!curComponent.auxiliaryMatrix">-->
-      <!--          <i class="icon iconfont icon-xuanfuanniu" />-->
-      <!--          {{ $t('panel.suspension') }}-->
-      <!--        </span>-->
-      <!--      </div>-->
-      <!--      <div class="canvas-config" style="margin-right: 10px">-->
-      <!--        <span> {{ $t('panel.canvas_scale') }} </span>-->
-      <!--        <input v-model="scale" @input="handleScaleChange"> %-->
-      <!--      </div>-->
-
       <el-tooltip v-if="!canvasStyleData.auxiliaryMatrix" :content="$t('panel.new_element_distribution')+':'+$t('panel.suspension')">
         <el-button class="icon iconfont-tb icon-xuanfuanniu" size="mini" circle @click="auxiliaryMatrixChange" />
       </el-tooltip>
@@ -65,13 +38,9 @@
       <el-tooltip :content="$t('panel.redo') ">
         <el-button class="el-icon-refresh-left" size="mini" circle @click="redo" />
       </el-tooltip>
-      <!--      <el-tooltip :content="$t('panel.insert_picture') ">-->
-      <!--        <el-button class="el-icon-upload" size="mini" circle @click="goFile" />-->
-      <!--      </el-tooltip>-->
       <el-tooltip :content="$t('panel.clean_canvas')">
         <el-button class="el-icon-document-delete" size="mini" circle @click="clearCanvas" />
       </el-tooltip>
-      <!--      <input id="input" ref="files" type="file" hidden @change="handleFileChange">-->
       <el-tooltip :content="$t('panel.fullscreen_preview')">
         <el-button class="el-icon-view" size="mini" circle @click="clickPreview" />
       </el-tooltip>

frontend/src/layout/index.vue

 <template>
   <div :class="classObj" class="app-wrapper">
     <licbar />
-    <topbar />
+    <topbar v-if="componentName!=='PanelEdit'" />
 
-    <de-container style="padding-top: 56px;">
+    <de-container :style="mainStyle">
       <de-aside-container v-if="!sidebar.hide" class="le-aside-container">
         <sidebar class="sidebar-container" />
       </de-aside-container>
 
-      <de-main-container class="la-main-container">
+      <de-main-container class="la-main-container" :class="{'full-height':fullHeightFlag}">
         <app-main />
       </de-main-container>
     </de-container>
@@ -29,6 +29,8 @@ import ResizeMixin from './mixin/ResizeHandler'
 import DeMainContainer from '@/components/dataease/DeMainContainer'
 import DeContainer from '@/components/dataease/DeContainer'
 import DeAsideContainer from '@/components/dataease/DeAsideContainer'
+import bus from '@/utils/bus'
+
 export default {
   name: 'Layout',
   components: {
@@ -41,6 +43,11 @@ export default {
     DeAsideContainer
   },
   mixins: [ResizeMixin],
+  data() {
+    return {
+      componentName: 'PanelMain'
+    }
+  },
   computed: {
     sidebar() {
       return this.$store.state.app.sidebar
@@ -54,6 +61,20 @@ export default {
     showSettings() {
       return this.$store.state.settings.showSettings
     },
+    fullHeightFlag() {
+      return this.componentName === 'PanelEdit'
+    },
+    mainStyle() {
+      if (this.fullHeightFlag) {
+        return {
+          'height': '100vh!important'
+        }
+      } else {
+        return {
+          'paddingTop': '56px'
+        }
+      }
+    },
     classObj() {
       return {
         // hideSidebar: !this.sidebar.opened,
@@ -63,6 +84,11 @@ export default {
       }
     }
   },
+  mounted() {
+    bus.$on('PanelSwitchComponent', (c) => {
+      this.componentName = c.name
+    })
+  },
   methods: {
     handleClickOutside() {
       this.$store.dispatch('app/closeSideBar', { withoutAnimation: false })
@@ -127,4 +153,7 @@ export default {
         background-color: var(--SiderBG) !important;
       }
   }
+  .full-height {
+    height: 100vh !important;
+  }
 </style>

frontend/src/styles/index.scss

@@ -692,4 +692,10 @@ div:focus {
   padding-left: 0!important;
 }
 
+.el-color-predefine__color-selector{
+  border: 1px solid #999999!important;
+  margin: 0 0 6px 6px!important;
+}
+
+
 

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

@@ -864,6 +864,6 @@ export const COLOR_PANEL = [
   '#1e90ff',
   '#c71585',
   '#999999',
-  '#00008b',
-  '#000000'
+  '#000000',
+  '#FFFFFF'
 ]

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

@@ -1497,7 +1497,7 @@ export default {
       }
     },
     addXaxis(e) {
-      if (this.view.type === 'map' && this.view.xaxis.length > 1) {
+      if ((this.view.type === 'map' || this.view.type === 'word-cloud') && this.view.xaxis.length > 1) {
         this.view.xaxis = [this.view.xaxis[0]]
       }
       if (this.view.type !== 'table-info') {
@@ -1507,7 +1507,7 @@ export default {
       this.calcData(true)
     },
     addYaxis(e) {
-      if ((this.view.type === 'map' || this.view.type === 'waterfall') && this.view.yaxis.length > 1) {
+      if ((this.view.type === 'map' || this.view.type === 'waterfall' || this.view.type === 'word-cloud') && this.view.yaxis.length > 1) {
         this.view.yaxis = [this.view.yaxis[0]]
       }
       this.dragCheckType(this.view.yaxis, 'q')

frontend/src/views/panel/SubjectSetting/PanelStyle/BackgroundSelector.vue

@@ -12,7 +12,7 @@
               <el-radio v-model="panel.backgroundType" label="color" @change="onChangeType">{{ $t('chart.color') }}</el-radio>
             </el-col>
             <el-col :span="18">
-              <el-color-picker v-model="panel.color" size="mini" style="cursor: pointer;z-index: 1004;"   @change="onChangeType"/>
+              <el-color-picker v-model="panel.color" :predefine="predefineColors" size="mini" style="cursor: pointer;z-index: 1004;" @change="onChangeType" />
             </el-col>
           </el-row>
           <el-row style="height: 60px;margin-top:10px;overflow: hidden">
@@ -50,6 +50,7 @@
 
 import { mapState } from 'vuex'
 import { deepCopy } from '@/components/canvas/utils/utils'
+import { COLOR_PANEL } from '@/views/chart/chart/chart'
 
 export default {
   name: 'BackgroundSelector',
@@ -59,7 +60,9 @@ export default {
       dialogImageUrl: '',
       dialogVisible: false,
       uploadDisabled: false,
-      panel: null
+      panel: null,
+      predefineColors: COLOR_PANEL
+
     }
   },
   computed: mapState([
@@ -80,7 +83,7 @@ export default {
       const canvasStyleData = deepCopy(this.canvasStyleData)
       canvasStyleData.panel = this.panel
       this.$store.commit('setCanvasStyle', canvasStyleData)
-      this.$store.commit('recordSnapshot','commitStyle')
+      this.$store.commit('recordSnapshot', 'commitStyle')
     },
     onChangeType() {
       this.commitStyle()

frontend/src/views/panel/edit/index.vue

@@ -310,7 +310,9 @@ export default {
       }
     },
     customCanvasStyle() {
-      let style = {}
+      let style = {
+        padding: this.componentGap + 'px'
+      }
 
       if (this.canvasStyleData.openCommonStyle) {
         if (this.canvasStyleData.panel.backgroundType === 'image' && this.canvasStyleData.panel.imageUrl) {
@@ -340,7 +342,8 @@ export default {
       'curComponentIndex',
       'componentData',
       'linkageSettingStatus',
-      'dragComponentInfo'
+      'dragComponentInfo',
+      'componentGap'
     ])
   },
 
@@ -680,9 +683,9 @@ export default {
         this.$nextTick(() => {
           const canvasHeight = document.getElementById('canvasInfo').offsetHeight
           const canvasWidth = document.getElementById('canvasInfo').offsetWidth
-          this.outStyle.height = canvasHeight
+          this.outStyle.height = canvasHeight - (this.componentGap * 2)
           // 临时处理 确保每次restore 有会更新
-          this.outStyle.width = canvasWidth + (Math.random() * 0.000001)
+          this.outStyle.width = canvasWidth - (this.componentGap * 2) + (Math.random() * 0.000001)
           // console.log(canvasHeight + '--' + canvasWidth)
         })
       }
@@ -847,14 +850,14 @@ export default {
 
 <style scoped>
   .ms-aside-container {
-    height: calc(100vh - 91px);
+    height: calc(100vh - 35px);
     max-width: 60px;
     border: none;
     width: 60px;
   }
 
   .ms-main-container {
-    height: calc(100vh - 91px);
+    height: calc(100vh - 35px);
   }
 
   .de-header {
@@ -888,7 +891,7 @@ export default {
 .leftPanel {
   width: 100%;
   max-width: 300px;
-  height: calc(100vh - 91px);
+  height: calc(100vh - 35px);
   position: fixed;
   top: 91px;
   left: 60px;
@@ -915,14 +918,13 @@ export default {
 }
 
 .this_canvas{
-  height: calc(100vh - 91px);
+  height: calc(100vh - 35px);
   overflow-x: hidden;
   overflow-y: auto;
   background-size:100% 100% !important;
-
 }
 .el-main{
-  height: calc(100vh - 91px);
+  height: calc(100vh - 35px);
   padding: 0!important;
   overflow: auto;
   position: relative;

frontend/src/views/panel/index.vue

 <template>
   <de-container v-loading="$store.getters.loadingMap[$store.getters.currentPath]" style="background-color: #f7f8fa">
-    <de-main-container>
+    <de-main-container :class="{'full-height':componentName==='PanelEdit'}">
       <panel-main v-show="componentName==='PanelMain'" ref="panel_main" />
       <chart-edit v-if="componentName==='ChartEdit'" :param="param" />
       <panel-edit v-if="componentName==='PanelEdit'" />
@@ -103,4 +103,7 @@ export default {
     padding: 0;
   }
 
+  .full-height {
+    height: 100vh !important;
+  }
 </style>

frontend/src/views/panel/list/PanelViewShow.vue

@@ -23,6 +23,12 @@
             <span v-if="panelInfo.sourcePanelName" style="color: green;font-size: 12px">({{ $t('panel.source_panel_name') }}:{{ panelInfo.sourcePanelName }})</span>
           </el-col>
           <el-col :span="12">
+            <span v-if="hasDataPermission('edit',panelInfo.privileges)&&activeTab==='PanelList'" style="float: right;margin-right: 10px">
+              <el-button size="mini" type="primary" @click="editPanel">
+                {{ $t('commons.edit') }}
+              </el-button>
+            </span>
+
             <span v-if="hasDataPermission('export',panelInfo.privileges)" style="float: right;margin-right: 10px">
               <el-tooltip :content="$t('panel.save_to_panel')">
                 <el-button class="el-icon-folder-checked" size="mini" circle @click="saveToTemplate" />
@@ -61,11 +67,7 @@
                 <el-button class="el-icon-star-on" size="mini" circle @click="unstar" />
               </el-tooltip>
             </span>
-            <span v-if="hasDataPermission('edit',panelInfo.privileges)&&activeTab==='PanelList'" style="float: right;margin-right: 10px">
-              <el-tooltip :content="$t('commons.edit')">
-                <el-button class="el-icon-edit" size="mini" circle @click="editPanel" />
-              </el-tooltip>
-            </span>
+
           </el-col>
         </div>
       </el-row>
@@ -340,7 +342,7 @@ export default {
     min-height: 400px;
     height: 100%;
     min-width: 500px;
-    overflow-y: auto;
+    overflow-y: hidden;
     border-top: 1px solid #E6E6E6;
   }