sea-chart 1.1.58 → 1.1.60

package/dist/components/color-picker/index.js

@@ -7,10 +7,6 @@ class ColorPicker extends React.PureComponent {
     this.onPickColorToggle = () => {
       this.setState({
         isShowColorPicker: !this.state.isShowColorPicker
-      }, () => {
-        if (this.state.isShowColorPicker) {
-          this.getPopoverStyle();
-        }
       });
     };
     this.onInputChanged = event => {
@@ -18,38 +14,8 @@ class ColorPicker extends React.PureComponent {
       if (value === this.props.activeColor) return;
       this.props.onColorChanged(value);
     };
-    this.getPopoverStyle = () => {
-      if (!this.colorPickerContainerRef || !this.colorPickerRef) return {};
-      setTimeout(() => {
-        const {
-          top,
-          height
-        } = this.colorPickerContainerRef.getBoundingClientRect();
-        const {
-          clientHeight
-        } = document.body;
-        const selectTop = top + height;
-        let colorPickerHeight = 0;
-        if (this.colorPickerRef.current) {
-          colorPickerHeight = this.colorPickerRef.current.getHeight();
-        }
-        let style = {
-          left: 0
-        };
-        if (clientHeight - selectTop < colorPickerHeight) {
-          style = {
-            ...style,
-            bottom: '2.375rem'
-          };
-        }
-        this.setState({
-          popoverStyle: style
-        });
-      }, 10);
-    };
     this.state = {
-      isShowColorPicker: false,
-      popoverStyle: {}
+      isShowColorPicker: false
     };
     this.colorPickerContainerRef = null;
     this.colorPickerRef = React.createRef();
@@ -58,9 +24,6 @@ class ColorPicker extends React.PureComponent {
     const {
       activeColor
     } = this.props;
-    const {
-      popoverStyle
-    } = this.state;
     const isWhiteColor = activeColor && activeColor.toUpperCase() === '#FFFFFF';
     return /*#__PURE__*/React.createElement("div", {
       className: "color-picker-container",
@@ -83,7 +46,9 @@ class ColorPicker extends React.PureComponent {
       color: activeColor,
       onSubmit: this.props.onColorChanged,
       onToggle: this.onPickColorToggle,
-      popoverStyle: popoverStyle
+      useProtal: true,
+      target: this.colorPickerContainerRef,
+      scrollContainerId: "sea-chart-settings-container"
     }));
   }
 }

package/dist/settings/index.js

@@ -95,7 +95,8 @@ const Settings = _ref => {
       data: setting.type
     }, name || intl.get(setting.name));
   })), /*#__PURE__*/React.createElement("div", {
-    className: "chart-settings-container position-relative"
+    className: "chart-settings-container position-relative",
+    id: "sea-chart-settings-container"
   }, /*#__PURE__*/React.createElement("div", {
     id: "sea-chart-settings-content",
     className: "chart-settings-content"

package/dist/settings/table-element-settings/data-settings.js

@@ -11,7 +11,8 @@ export default function TableElementDataSetting(_ref) {
   let {
     tables,
     chart,
-    onChange
+    onChange,
+    dataSources
   } = _ref;
   const {
     config
@@ -78,7 +79,8 @@ export default function TableElementDataSetting(_ref) {
   }, /*#__PURE__*/React.createElement(StatisticType, {
     chart: chart,
     generateChartConfig: generateConfig,
-    onChange: onTypeChange
+    onChange: onTypeChange,
+    dataSources: dataSources
   }), /*#__PURE__*/React.createElement(SelectTable, {
     tables: tables,
     selectedTableId: table_id,

package/dist/settings/widgets/color-settings/index.js

@@ -3,51 +3,15 @@ import _DTableColorPicker from "dtable-ui-component/lib/DTableColorPicker";
 import React, { Component } from 'react';
 import classnames from 'classnames';
 import { Input, FormGroup, Label } from 'reactstrap';
-import ReactColor from 'react-color';
 import intl from '../../../intl';
 import ColorRulesPopover from '../../../components/color-popover/color-rules-popover';
 import { getValidColorRules } from '../../../utils/color-utils';
 import { CHART_TYPE, TYPE_COLOR_USING, TYPE_DISPLAY_COLOR_USING } from '../../../constants';
 import { COLOR_RULE_FILTER_TYPE_MAP } from '../../../constants/color-rules';
 import './index.css';
-const COVER = {
-  top: '0px',
-  right: '0px',
-  bottom: '0px',
-  left: '0px'
-};
 class ColorUseTypeSelector extends Component {
   constructor(props) {
     super(props);
-    this.getPopoverStyle = () => {
-      if (!this.colorSpecialContainerRef || !this.colorPickerRef) return {};
-      setTimeout(() => {
-        const {
-          top,
-          height
-        } = this.colorSpecialContainerRef.getBoundingClientRect();
-        const {
-          clientHeight
-        } = document.body;
-        const selectTop = top + height;
-        let colorPickerHeight = 0;
-        if (this.colorPickerRef.current) {
-          colorPickerHeight = this.colorPickerRef.current.getHeight();
-        }
-        let style = {
-          left: 0
-        };
-        if (clientHeight - selectTop < colorPickerHeight) {
-          style = {
-            ...style,
-            bottom: '2.375rem'
-          };
-        }
-        this.setState({
-          popoverStyle: style
-        });
-      }, 10);
-    };
     this.getUsableColorTypes = chartType => {
       switch (chartType) {
         case CHART_TYPE.BAR_GROUP:
@@ -201,8 +165,6 @@ class ColorUseTypeSelector extends Component {
       }, () => {
         if (!this.state.isShowColorSelector) {
           this.modifySpecificColor(this.state.specificColor);
-        } else {
-          this.getPopoverStyle();
         }
       });
     };
@@ -274,8 +236,7 @@ class ColorUseTypeSelector extends Component {
     };
     this.renderSpecificColorSelector = () => {
       const {
-        specificColor,
-        popoverStyle
+        specificColor
       } = this.state;
       const id = 'statistic_selected_specific_color';
       return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
@@ -300,7 +261,9 @@ class ColorUseTypeSelector extends Component {
         color: specificColor,
         onSubmit: this.modifyHex,
         onToggle: this.onToggleColorSelector,
-        popoverStyle: popoverStyle
+        useProtal: true,
+        target: this.colorSpecialContainerRef,
+        scrollContainerId: "sea-chart-settings-container"
       }))));
     };
     this.renderColorRulesEditor = () => {
@@ -344,8 +307,7 @@ class ColorUseTypeSelector extends Component {
     this.state = {
       isShowColorSelector: false,
       isShowColorRulesEditor: false,
-      specificColor: this.getSelectedSpecificColor(),
-      popoverStyle: {}
+      specificColor: this.getSelectedSpecificColor()
     };
     this.colorOptions = this.initColorTypeOptions();
     this.isToggleColorRulesEditor = false;

package/dist/view/index.css

@@ -34,10 +34,14 @@
   height: calc(100% - 41px);
 }
 
-.sea-chart-formatter .sea-chart-table-formatter-container {
+.sea-chart-formatter .sea-chart-table-formatter-container:hover {
   overflow: auto;
 }
 
+.sea-chart-formatter .sea-chart-table-formatter-container {
+  overflow: hidden;
+}
+
 .sea-chart-formatter .sea-chart-heat_map-formatter-container {
   overflow: auto;
 }

package/dist/view/wrapper/table-element/components/records-body.js

@@ -49,9 +49,13 @@ class RecordsBody extends Component {
       }
       setVerticalScrollbarTop(scrollTop);
     };
-    this.onScroll = () => {
+    this.onScroll = e => {
+      e.stopPropagation();
       this.recalculate();
     };
+    this.onWheel = e => {
+      this.props.setHorizontalScroll(e.deltaX);
+    };
     this.setContentScrollTop = scrollTop => {
       this.tableElementResultContentRef.scrollTop = scrollTop;
     };
@@ -98,6 +102,7 @@ class RecordsBody extends Component {
         color: globalTheme === 'light' ? '#212529' : '#ffffff'
       },
       onScroll: this.onScroll,
+      onWheel: this.onWheel,
       ref: ref => this.tableElementResultContentRef = ref
     }, /*#__PURE__*/React.createElement("div", {
       className: "table-element-result-table",

package/dist/view/wrapper/table-element/components/records.js

@@ -122,6 +122,9 @@ class Records extends Component {
     this.onVerticalScrollbarScroll = scrollTop => {
       this.recordsBody.setContentScrollTop(scrollTop);
     };
+    this.setHorizontalScroll = deltaX => {
+      this.resultRef.scrollLeft += deltaX;
+    };
     this.state = {
       scrollLeft: 0
     };
@@ -156,7 +159,8 @@ class Records extends Component {
       ref: ref => this.resultContainerRef = ref
     }, /*#__PURE__*/React.createElement("div", {
       id: "sea-chart-table-element-result-container",
-      className: "table-element-result-container"
+      className: "table-element-result-container",
+      ref: ref => this.resultRef = ref
     }, /*#__PURE__*/React.createElement("div", {
       id: "sea-chart-table-element-result-content",
       className: "table-element-result-content",
@@ -175,7 +179,8 @@ class Records extends Component {
       collaborators: collaborators,
       queryUsers: this.props.queryUsers,
       setVerticalScrollbarTop: this.setVerticalScrollbarTop,
-      globalTheme: this.props.globalTheme
+      globalTheme: this.props.globalTheme,
+      setHorizontalScroll: this.setHorizontalScroll
     }))), /*#__PURE__*/React.createElement(VerticalScrollbar, {
       contentHeight: 33 * records.length,
       ref: ref => this.verticalScrollbar = ref,

package/dist/view/wrapper/table-element/index.js

@@ -105,6 +105,7 @@ export default class TableElement extends React.Component {
       shownColumns,
       selectedTable
     } = this.state;
+    const records = Array.isArray(result) ? result : [];
     return /*#__PURE__*/React.createElement("div", {
       className: "table-element-result",
       ref: ref => this.wrapperRef = ref
@@ -112,7 +113,7 @@ export default class TableElement extends React.Component {
       chart: chart,
       selectedTable: selectedTable,
       shownColumns: shownColumns,
-      records: result,
+      records: records,
       collaborators: relatedUserList,
       queryUsers: this.queryUsers,
       globalTheme: globalTheme

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sea-chart",
-  "version": "1.1.58",
+  "version": "1.1.60",
   "main": "./dist/index.js",
   "dependencies": {
     "@antv/data-set": "0.11.8",
@@ -27,7 +27,7 @@
   },
   "peerDependencies": {
     "@antv/scale": "0.3.14",
-    "dtable-ui-component": "^5.2.17",
+    "dtable-ui-component": "^5.2.19",
     "dtable-utils": "~5.0.*",
     "prop-types": "15.8.1",
     "react": "^17.0.0",