Merge pull request #1736 from ruanhan/drill_fix_519

fix(drill) #1713

webapp/app/components/DataDrill/EnhancerPanel.tsx

@@ -0,0 +1,71 @@
+/*
+ * <<
+ * Davinci
+ * ==
+ * Copyright (C) 2016 - 2017 EDP
+ * ==
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * >>
+ */
+import React from 'react'
+import classnames from 'classnames'
+import utilStyles from 'app/assets/less/util.less'
+import styles from './datadrill.less'
+import { IDataDrillProps, IEnhancerPanel } from './types'
+import DataDrill from './Panel'
+
+function enhancePanel<T>() {
+  return (WrapperComponent) => {
+    class EnhancerPanel extends React.PureComponent<T & IEnhancerPanel, {}> {
+      private hide() {
+        let isHide = true
+        const {
+          isSelectedGroup,
+          isDrillableChart,
+          isSelectedfilter
+        } = this.props
+        if (!isDrillableChart) {
+          isHide = true
+          return isHide
+        }
+
+        if (isSelectedfilter) {
+          isHide = false
+          return isHide
+        }
+
+        if (isSelectedGroup) {
+          isHide = false
+          return isHide
+        }
+
+        return isHide
+      }
+
+      public render() {
+        const dataDrillPanelClass = classnames({
+          [styles.dataDrillPanel]: true,
+          [utilStyles.hide]: this.hide()
+        })
+        return (
+          <div className={dataDrillPanelClass}>
+            <WrapperComponent {...this.props} />
+          </div>
+        )
+      }
+    }
+    return EnhancerPanel
+  }
+}
+
+export default enhancePanel<IDataDrillProps>()(DataDrill)

webapp/app/components/DataDrill/Panel.tsx

@@ -21,30 +21,18 @@
 import React, { useMemo } from 'react'
 import { Menu, Icon } from 'antd'
 import { getPivot } from 'containers/Widget/components/util'
-import { DrillType, WidgetDimension } from './types'
+import { DrillType, WidgetDimension, IDataDrillProps } from './types'
 import { getListsByViewModelTypes } from 'containers/View/util'
 import { ViewModelTypes } from 'containers/View/constants'
-
 const styles = require('./datadrill.less')
-export interface IDataDrillProps {
-  widgetConfig: any
-  drillHistory?: any
-  widgetMode?: string
-  key?: string | number
-  drillpathSetting?: any
-  currentData?: object[]
-  onDataDrillPath?: () => any
-  onDataDrillDown?: (name: string, dimensions?: WidgetDimension) => any
-  onDataDrillUp?: (name: string) => any
-}
 
-const Datadrill: React.FC<IDataDrillProps> = (props: IDataDrillProps) => {
+
+const DataDrill: React.FC<IDataDrillProps> = (props: IDataDrillProps) => {
   const {
     onDataDrillUp,
     onDataDrillDown,
     onDataDrillPath,
     currentData,
-    widgetMode,
     drillHistory,
     widgetConfig,
     drillpathSetting
@@ -61,6 +49,10 @@ const Datadrill: React.FC<IDataDrillProps> = (props: IDataDrillProps) => {
     )(ViewModelTypes.Category)
   }, [widgetConfig])
 
+  const widgetMode = useMemo(() => {
+    return widgetConfig && widgetConfig.mode
+  }, [widgetConfig])
+
   const currentCategories = useMemo(() => {
     return currentData && currentData[0] ? Object.keys(currentData[0]) : []
   }, [currentData])
@@ -262,4 +254,4 @@ const Datadrill: React.FC<IDataDrillProps> = (props: IDataDrillProps) => {
   }
 }
 
-export default Datadrill
+export default DataDrill

webapp/app/components/DataDrill/datadrill.less

@@ -5,3 +5,10 @@
   justify-content: space-between;
   align-self: center;
 }
+
+.dataDrillPanel {
+  position: absolute;
+  color: rgba(0,0,0,.54);
+  background: #fff;
+  box-shadow: 0 0 6px 0 rgba(0,0,0,.1), 0 10px 12px 0 rgba(170,182,206,.36);
+}

webapp/app/components/DataDrill/types.ts

@@ -35,7 +35,8 @@ import {
   DimetionType,
   RenderType,
   WidgetMode,
-  IPaginationParams
+  IPaginationParams,
+  IWidgetConfig
 } from 'containers/Widget/components/Widget'
 
 import { IDataParamProperty } from 'containers/Widget/components/Workbench/OperatingPanel'
@@ -120,3 +121,20 @@ export interface ISourceDataFilter {
   key: string
   value: string
 }
+
+
+export interface IDataDrillProps {
+  widgetConfig: IWidgetConfig
+  drillHistory?: IDrillDetail[]
+  key?: string | number
+  currentData?: object[]
+  onDataDrillPath?: () => any
+  onDataDrillDown?: (name: string, dimensions?: WidgetDimension) => any
+  onDataDrillUp?: (name: string) => any
+}
+
+export interface IEnhancerPanel {
+  isDrillableChart: boolean
+  isSelectedfilter: boolean | object []
+  isSelectedGroup: boolean | string[]
+}

webapp/app/containers/Dashboard/components/DashboardItem.tsx

@@ -51,6 +51,7 @@ import { ControlPanelLayoutTypes, ControlPanelTypes } from 'app/components/Contr
 import { OnGetControlOptions } from 'app/components/Control/types'
 import styles from '../Dashboard.less'
 import utilStyles from 'app/assets/less/util.less'
+import EnhancerPanel from 'components/DataDrill/EnhancerPanel'
 
 interface IDashboardItemProps {
   itemId: number
@@ -493,7 +494,9 @@ export class DashboardItem extends React.PureComponent<IDashboardItemProps, IDas
       queryVariables,
       widgetProps,
       isDrilling,
-      model
+      model,
+      sourceDataGroup,
+      sourceDataOfBrushed
     } = this.state
 
     let downloadButton
@@ -549,9 +552,6 @@ export class DashboardItem extends React.PureComponent<IDashboardItemProps, IDas
           <Menu.Item className={styles.menuItem}>
             <InfoButton className={styles.menuText} onClick={onShowEdit(itemId)}>基本信息</InfoButton>
           </Menu.Item>
-          {/* <Menu.Item className={styles.menuItem}>
-            <InfoButton className={styles.menuText} onClick={onShowDrillEdit(itemId)}>钻取设置</InfoButton>
-          </Menu.Item> */}
           <Menu.Item className={styles.menuItem}>
             <Popconfirm
               title="确定删除？"
@@ -622,44 +622,19 @@ export class DashboardItem extends React.PureComponent<IDashboardItemProps, IDas
                                                                 ? (<Tooltip title="可钻取"><i className="iconfont icon-xiazuan"/></Tooltip>)
                                                                 : void 0
                                                               : (<Tooltip title="可联动"><i className="iconfont icon-liandong1"/></Tooltip>)
-    const triggerClass = classnames({
-      [styles.trigger]: true,
-      [utilStyles.hide]: this.props.isTrigger === false
-    })
 
-    let isSelectedData = false
-    if (this.state.whichDataDrillBrushed) {
-      (this.state.whichDataDrillBrushed as object[]).forEach((brushed, index) => {
-        if (brushed[index] && (brushed[index] as any[]).length > 0) {
-          isSelectedData = true
-        }
-      })
-    }
 
-    const dataDrillPanelClass = classnames({
-      [styles.dataDrillPanel]: true,
-     // [utilStyles.hide]: !isSelectedData
-    })
-    let positionStyle = {}
-    if (this.state.dataDrillPanelPosition) {
-      positionStyle = this.state.dataDrillPanelPosition
-    }
-    let mode = void 0
-    if (widget && widget.config) {
-      mode = widget.config.mode
-    }
-    const dataDrillPanel =
-    (
-      <div className={dataDrillPanelClass}>
-        <DataDrill
-          widgetConfig={widget.config}
-          onDataDrillDown={this.drillDown}
-          onDataDrillUp={this.drillUp}
-          drillHistory={drillHistory}
-          widgetMode={mode}
-          currentData={data}
-        />
-      </div>
+    const dataDrillPanel = (
+      <EnhancerPanel
+        currentData={data}
+        widgetConfig={widget.config}
+        onDataDrillDown={this.drillDown}
+        onDataDrillUp={this.drillUp}
+        drillHistory={drillHistory}
+        isSelectedfilter={sourceDataOfBrushed}
+        isSelectedGroup={sourceDataGroup}
+        isDrillableChart={isDrillableChart}
+      />
     )
     const dataDrillHistoryClass = classnames({
       [styles.dataDrillHistory]: true,
@@ -714,10 +689,6 @@ export class DashboardItem extends React.PureComponent<IDashboardItemProps, IDas
           </div>
         </div>
 
-        {/* <div className={triggerClass}>
-          <i className="iconfont icon-icon_linkage"/>
-        </div> */}
-
         <div className={styles.trigger}>
           {drillInteractIcon}
         </div>