sea-chart 0.0.34 → 0.0.35

package/dist/components/color-popover/color-selector-popover.js

@@ -41,14 +41,14 @@ class ColorSelectorPopover extends Component {
       target: target,
       placement: placement || 'auto-start',
       hideArrow: hideArrow,
-      popoverClassName: "statistic-color-selector",
+      popoverClassName: "sea-chart-color-selector",
       hideDTablePopover: this.props.toggle,
       hideDTablePopoverWithEsc: this.props.toggle
     }, /*#__PURE__*/React.createElement("div", {
-      className: "statistic-color-selector-wrapper"
+      className: "sea-chart-color-selector-wrapper"
     }, this.colorOptions.map(colorOption => /*#__PURE__*/React.createElement("div", {
-      key: "statistic-color-option-".concat(colorOption.color),
-      className: "statistic-color-option",
+      key: "sea-chart-color-option-".concat(colorOption.color),
+      className: "sea-chart-color-option",
       onClick: () => this.onSelectColor(colorOption.color),
       style: {
         backgroundColor: colorOption.color,

package/dist/components/color-setting/color-group-selector.js

@@ -11,10 +11,10 @@ class ColorGroupSelector extends Component {
         return {
           value: colorOption.name,
           label: /*#__PURE__*/React.createElement("div", {
-            className: "statistic-color-option d-flex"
+            className: "sea-chart-color-option d-flex"
           }, colorOption.exampleColors.map((color, index) => {
             return /*#__PURE__*/React.createElement("span", {
-              className: "statistic-color-block",
+              className: "sea-chart-color-block",
               key: index,
               style: {
                 background: "".concat(color)

package/dist/settings/bar-settings/style-settings.js

@@ -5,7 +5,7 @@ import Switch from '../widgets/switch';
 import Divider from '../widgets/divider';
 import MinMaxSetting from '../widgets/min-max-setting';
 import DisplayValuesSettings from '../widgets/display-values-settings';
-import ColorUseTypeSelector from '../widgets/color-settings/color-use-type-selector';
+import ColorUseTypeSelector from '../widgets/color-settings';
 import { eventStopPropagation } from '../../utils';
 import { X_LABEL_POSITIONS, Y_LABEL_POSITIONS, LABEL_POSITION_TYPE_SHOW, CHART_TYPE } from '../../constants';
 import intl from '../../intl';

package/dist/settings/basic-number-card/data-settings.js

@@ -4,7 +4,7 @@ import { COLUMNS_ICON_CONFIG, getTableById } from 'dtable-utils';
 import DTableSelect from "dtable-ui-component/lib/DTableSelect";
 import CommonDataSettings from '../widgets/common-data-settings';
 import { BaseUtils } from '../../utils';
-import { CHART_SUMMARY_SHOW, CHART_SUMMARY_CALCULATION_METHOD, CHART_SUPPORT_COLUMNS, CHART_Y_GROUP_TYPE } from '../../constants';
+import { CHART_SUMMARY_SHOW, CHART_SUMMARY_CALCULATION_METHOD, CHART_SUPPORT_COLUMNS, CHART_Y_GROUP_TYPE, BASIC_NUMBER_CARD_CALCULATION_METHOD } from '../../constants';
 import intl from '../../intl';
 const DataSettings = _ref => {
   let {
@@ -120,11 +120,21 @@ const DataSettings = _ref => {
   const getSelectedMethodOption = useCallback((method, summaryMethodsOptions) => {
     return summaryMethodsOptions.find(m => m.value === method) || summaryMethodsOptions[0];
   }, []);
-  const selectedSummaryTypeOption = summaryTypeOptions.find(option => option.value === chart.config.summary_type) || summaryTypeOptions[0];
-  const isSummarizeAField = chart.config.summary_type === CHART_Y_GROUP_TYPE.SINGLE_NUMERIC_COLUMN;
   const {
-    summary_method
-  } = chart.config;
+    config
+  } = chart;
+  const {
+    summary_method,
+    summary_type
+  } = config;
+  let selectedSummaryTypeOption;
+  if (!summary_type && summary_method === BASIC_NUMBER_CARD_CALCULATION_METHOD) {
+    selectedSummaryTypeOption = summaryTypeOptions[0];
+  } else {
+    // normal case is summary_type exists, but if not and summary_method is not "COUNT", then it's "SINGLE_NUMERIC_COLUMN"
+    selectedSummaryTypeOption = summaryTypeOptions.find(option => option.value === summary_type) || summaryTypeOptions[1];
+  }
+  const isSummarizeAField = chart.config.summary_type === CHART_Y_GROUP_TYPE.SINGLE_NUMERIC_COLUMN;
   const selectedMethodOption = getSelectedMethodOption(summary_method, summaryMethodsOptions);
   let selectedColumnOption;
   if (isSummarizeAField) {

package/dist/settings/heat-map-settings/style-settings.js

@@ -2,7 +2,7 @@ import React, { useCallback } from 'react';
 import { Label, FormGroup } from 'reactstrap';
 import Divider from '../widgets/divider';
 import { PixelEditor } from '../../components';
-import ColorUseTypeSelector from '../widgets/color-settings/color-use-type-selector';
+import ColorUseTypeSelector from '../widgets/color-settings';
 import { DEFAULT_GRID_SIZE, DEFAULT_GRID_DISTANCE } from '../../constants';
 import intl from '../../intl';
 const StyleSettings = _ref => {
@@ -43,13 +43,11 @@ const StyleSettings = _ref => {
     grid_distance,
     grid_size
   } = config;
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(FormGroup, {
-    className: "sea-chart-parameter-item"
-  }, /*#__PURE__*/React.createElement(ColorUseTypeSelector, {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ColorUseTypeSelector, {
     chart: config,
     labelColorConfigs: labelColorConfigs,
     updateChart: onColorChange
-  })), /*#__PURE__*/React.createElement(Divider, null), /*#__PURE__*/React.createElement(FormGroup, {
+  }), /*#__PURE__*/React.createElement(Divider, null), /*#__PURE__*/React.createElement(FormGroup, {
     className: "sea-chart-parameter-item"
   }, /*#__PURE__*/React.createElement(Label, null, intl.get('Grid_size')), /*#__PURE__*/React.createElement(PixelEditor, {
     pixel: grid_size,

package/dist/settings/stacks-settings/index.js

@@ -1,7 +1,7 @@
 import React, { Component, Fragment } from 'react';
 import intl from '../../intl';
-import StackItemSettings from './stack-item-settings';
 import { CHART_SUMMARY_SHOW, CHART_TYPE, CHART_SUMMARY_CALCULATION_METHOD } from '../../constants';
+import StackItemSettings from './stack-item-settings';
 import './index.css';
 class StacksSettings extends Component {
   constructor(props) {
@@ -223,7 +223,7 @@ class StacksSettings extends Component {
         summaryMethodsOptions: this.summaryMethodsOptions,
         deleteStack: () => this.deleteStack(index),
         addNumericSummary: () => this.addStackNumericSummary(index),
-        modifyGroupbyNumericColumn: (columnOption, prevColumnOption, numericColumnIndex, currentAxisesIndex) => this.modifyStackGroupbyNumericColumn(index, {
+        modifyGroupbyNumericColumn: (columnOption, numericColumnIndex, prevColumnOption, currentAxisesIndex) => this.modifyStackGroupbyNumericColumn(index, {
           numericColumnIndex,
           columnOption
         }, prevColumnOption, currentAxisesIndex),

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

@@ -30,7 +30,7 @@ const DataSettings = _ref => {
     const {
       columns
     } = selectedTable;
-    return columns.filter(column => BaseUtils.isNumericSummaryColumn(column) || BaseUtils.isDateSummaryColumn(column));
+    return columns.filter(column => BaseUtils.isNumericSummaryColumn(column));
   }, [selectedTable]);
   const numericColumnOptions = useMemo(() => {
     return numericColumns.map(column => {
@@ -47,9 +47,6 @@ const DataSettings = _ref => {
     });
   }, [numericColumns]);
   const groupTypeOptions = useMemo(() => {
-    const {
-      column_groupby_column_key
-    } = chart.config;
     let options = [{
       value: CHART_Y_GROUP_TYPE.COUNT,
       label: /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
@@ -64,19 +61,16 @@ const DataSettings = _ref => {
       }, intl.get(CHART_SUMMARY_SHOW['advanced'])), /*#__PURE__*/React.createElement("div", {
         className: "summary-type-explanation"
       }, intl.get('Compute_the_sum_maximum_or_minimum_value_of_records_in_each_group_by_a_field')))
+    }, {
+      value: CHART_Y_GROUP_TYPE.MULTIPLE_NUMERIC_COLUMN,
+      label: /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
+        className: "select-module select-module-name ml-0"
+      }, intl.get('Summarize_multiple_fields')), /*#__PURE__*/React.createElement("div", {
+        className: "summary-type-explanation"
+      }, intl.get('Compute_the_sum_maximum_or_minimum_value_of_records_in_each_group_by_multiple_fields')))
     }];
-    if (!column_groupby_column_key) {
-      options.push({
-        value: CHART_Y_GROUP_TYPE.MULTIPLE_NUMERIC_COLUMN,
-        label: /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
-          className: "select-module select-module-name ml-0"
-        }, intl.get('Summarize_multiple_fields')), /*#__PURE__*/React.createElement("div", {
-          className: "summary-type-explanation"
-        }, intl.get('Compute_the_sum_maximum_or_minimum_value_of_records_in_each_group_by_multiple_fields')))
-      });
-    }
     return options;
-  }, [chart.config]);
+  }, []);
   const onGroupByColumnChange = useCallback(option => {
     const {
       config
@@ -264,9 +258,9 @@ const DataSettings = _ref => {
       summary_type = CHART_SUMMARY_TYPE.ADVANCED;
       column_groupby_multiple_numeric_column = true;
       summary_columns = [];
-      column_groupby_column_key = null;
-      column_groupby_date_granularity = null;
-      column_groupby_geolocation_granularity = null;
+      // column_groupby_column_key = null;
+      // column_groupby_date_granularity = null;
+      // column_groupby_geolocation_granularity = null;
       summary_method = summary_method || CHART_SUMMARY_CALCULATION_METHOD[0];
       summary_column_key = null;
       if (numericColumns && numericColumns[0]) {
@@ -295,9 +289,9 @@ const DataSettings = _ref => {
       summary_type,
       column_groupby_column_key
     } = config;
-    if (summary_type === CHART_SUMMARY_TYPE.ADVANCED && column_groupby_column_key) {
-      return groupTypeOptions[1];
-    }
+    // if (summary_type === CHART_SUMMARY_TYPE.ADVANCED && column_groupby_column_key) {
+    //   return groupTypeOptions[1];
+    // }
     if (column_groupby_multiple_numeric_column) {
       return groupTypeOptions.find(item => item.value === CHART_Y_GROUP_TYPE.MULTIPLE_NUMERIC_COLUMN);
     }
@@ -454,10 +448,13 @@ const DataSettings = _ref => {
     } = config;
     if (summary_type !== CHART_SUMMARY_TYPE.ADVANCED) return null;
     if (column_groupby_multiple_numeric_column) {
-      const columnGroupbyColumn = getTableColumnByKey(selectedTable, column_groupby_column_key);
+      // const columnGroupbyColumn = getTableColumnByKey(selectedTable, column_groupby_column_key);
       const usedSummaryColumnKeys = Array.isArray(summary_columns) ? summary_columns.map(item => item.column_key) : [];
       const unUsedSummaryColumns = numericColumns.filter(column => column.key !== summary_column_key && !usedSummaryColumnKeys.includes(column.key));
-      return /*#__PURE__*/React.createElement(React.Fragment, null, !columnGroupbyColumn && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(NumericSummaryItem, {
+      return /*#__PURE__*/React.createElement(React.Fragment, null,
+      /*#__PURE__*/
+      // !columnGroupbyColumn &&
+      React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(NumericSummaryItem, {
         index: 0,
         value: {
           column_key: summary_column_key,
@@ -490,7 +487,7 @@ const DataSettings = _ref => {
       summaryColumnKey: 'summary_column_key',
       onChange: onChange
     });
-  }, [chart, tables, numericColumns, selectedTable, onChange, numericColumnOptions, onGroupbyNumericColumnChange, onSummaryMethodChange, renderGroupbyNumericColumns, onAddNumericColumn]);
+  }, [chart, tables, onChange, numericColumns, numericColumnOptions, onGroupbyNumericColumnChange, onSummaryMethodChange, renderGroupbyNumericColumns, onAddNumericColumn]);
   const {
     config
   } = chart;

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

@@ -1,16 +1,16 @@
 /* specific color */
-.statistic-chart-parameter-item .selected-specific-color {
+.sea-chart-color-type-selector .selected-specific-color {
   display: flex;
   align-items: center;
 }
   
-.statistic-chart-parameter-item .selected-specific-color-wrapper {
+.sea-chart-color-type-selector .selected-specific-color-wrapper {
   position: relative;
   width: 100%;
   line-height: 2.375rem;
 }
 
-.statistic-chart-parameter-item .specific-color-show {
+.sea-chart-color-type-selector .specific-color-show {
   position: absolute;
   display: inline-block;
   width: 24px;
@@ -23,87 +23,76 @@
   cursor: pointer;
 }
 
-.statistic-chart-parameter-item .specific-color-input {
+.sea-chart-color-type-selector .specific-color-input {
   padding-left: calc(1.25rem + 24px);
 }
 
-.statistic-chart-parameter-item .specific-color-text {
+.sea-chart-color-type-selector .specific-color-input:hover {
+  cursor: pointer;
+  border-color: rgb(179, 179, 179)
+}
+
+.sea-chart-color-type-selector .specific-color-input:focus {
+  border-color: #1991eb !important;
+  box-shadow: 0 0 0 2px rgba(70, 127, 207, 0.25);
+}
+
+.sea-chart-color-type-selector .specific-color-text {
   flex: 1;
 }
 
 /* color rules */
-.statistic-color-rules-toggle {
+.sea-chart-color-type-selector .sea-chart-color-rules-toggle {
   display: flex;
   justify-content: center;
   align-items: center;
   height: 38px;
   padding: 0 10px;
-  border-radius: 4px;
-  border: 1px solid #acacac;
+  border-radius: 3px;
+  border: 1px solid rgba(0, 40, 100, .12);
   cursor: pointer;
   user-select: none;
   background-color: #fff;
 }
 
-.statistic-color-rules-toggle.statistic-edit-color-rule {
-  justify-content: space-between;
+.sea-chart-color-type-selector .sea-chart-color-rules-toggle:hover {
+  cursor: pointer;
+  border-color: rgb(179, 179, 179)
+}
+
+.sea-chart-color-type-selector .sea-chart-color-rules-toggle:focus {
+  border-color: #1991eb !important;
+  box-shadow: 0 0 0 2px rgba(70, 127, 207, 0.25);
 }
 
-.statistic-color-rules-toggle:hover {
-  background-color: #eee;
+.sea-chart-color-type-selector .sea-chart-color-rules-toggle.sea-chart-edit-color-rule {
+  justify-content: space-between;
 }
 
-.statistic-color-rules-toggle .dtable-icon-add-table {
+.sea-chart-color-type-selector .sea-chart-color-rules-toggle .dtable-icon-add-table {
   font-size: 14px;
   font-weight: 600;
   color: #555;
 }
 
-.statistic-color-rules-toggle .dtable-icon-rename {
+.sea-chart-color-type-selector .sea-chart-color-rules-toggle .dtable-icon-rename {
   color: #999;
 }
 
-/* common add btn */
-.statistic-add-item-btn {
-  display: flex;
-  align-items: center;
-  height: 40px;
-  font-size: 14px;
-  font-weight: 500;
-  border-top: 1px solid #dedede;
-  background: #fff;
-  padding: 0 1rem;
-  border-bottom-left-radius: 3px;
-  border-bottom-right-radius: 3px;
-  position: relative;
-}
-
-.statistic-add-item-btn:hover {
-  cursor: pointer;
-  background: #f5f5f5;
-}
-
-.statistic-add-item-btn .dtable-icon-add-table {
-  margin-right: 10px;
-  font-size: 12px;
-  font-weight: 600;
-  transform: none;
-}
-
 /* color selector */
-.statistic-color-selector .popover {
+.sea-chart-color-selector .popover {
   max-width: 425px;
 }
 
-.statistic-color-selector .colorinput-input:checked ~ .colorinput-color:before {
+.sea-chart-color-selector .colorinput-input:checked ~ .colorinput-color:before {
   display: none;
 }
 
-.statistic-color-selector .col-auto {
+.sea-chart-color-selector .col-auto {
   padding-left: 3px;
 }
 
-.statistic-color-selector-wrapper {
+.sea-chart-color-selector-wrapper {
   width: 356px;
   padding: 10px 10px 12px;
   background-color: #fff;
@@ -113,14 +102,14 @@
   flex-wrap: wrap;
 }
 
-.statistic-color-option {
+.sea-chart-color-option {
   padding: 1px;
   background: #fff;
   border: 1px solid #fff;
   border-radius: 3px;
 }
 
-.statistic-color-selector .statistic-color-option {
+.sea-chart-color-selector .sea-chart-color-option {
   height: 20px;
   width: 20px;
   margin: 4px;
@@ -133,45 +122,30 @@
   cursor: pointer;
 }
 
-.statistic-color-selector .statistic-color-option .dtable-font {
+.sea-chart-color-selector .sea-chart-color-option .dtable-font {
   display: inline-block;
   transform: scale(.6);
 }
 
-.statistic-color-block {
+.sea-chart-color-block {
   width: 26px;
   height: 24px;
 }
 
-.statistic-color-block:first-child {
+.sea-chart-color-block:first-child {
   border-top-left-radius: 2px;
   border-bottom-left-radius: 2px;
 }
 
-.statistic-color-block:last-child {
+.sea-chart-color-block:last-child {
   border-top-right-radius: 2px;
   border-bottom-right-radius: 2px;
 }
 
-.statistic-chart-parameter-item .stack-settings-content-wrapper {
+.sea-chart-color-type-selector .stack-settings-content-wrapper {
   padding-left: 19px;
 }
 
-.statistic-stack-setting {
-  padding-bottom: 14px;
-}
-
-/* seatable-radio */
-.statistic-panel .seatable-radio .seatable-radio-description {
-  line-height: 16px;
-}
-
-/* column-formatter */
-.statistic-chart-container .single-select-option,
-.statistic-chart-container .multiple-select-option {
-  margin: 0 !important;
-}
-
 .statistic-chart-container .collaborators-formatter .collaborator {
   margin-right: 0 !important;
 }

package/dist/settings/widgets/color-settings/{color-use-type-selector.js → index.js}

@@ -1,8 +1,8 @@
 import React, { Component } from 'react';
 import classnames from 'classnames';
-import { Input } from 'reactstrap';
+import { Input, FormGroup, Label } from 'reactstrap';
 import ReactColor from 'react-color';
-import DTableSelect from "dtable-ui-component/lib/DTableSelect";
+import DTableCustomizeSelect from "dtable-ui-component/lib/DTableCustomizeSelect";
 import intl from '../../../intl';
 import ColorRulesPopover from '../../../components/color-popover/color-rules-popover';
 import { getValidColorRules } from '../../../utils/color-utils';
@@ -19,11 +19,11 @@ class ColorUseTypeSelector extends Component {
   constructor(props) {
     super(props);
     this.getPopoverStyle = () => {
-      if (!this.colorPickerContainerRef) return {};
+      if (!this.colorSpecialContainerRef) return {};
       const {
         top,
         height
-      } = this.colorPickerContainerRef.getBoundingClientRect();
+      } = this.colorSpecialContainerRef.getBoundingClientRect();
       const {
         clientHeight
       } = document.body;
@@ -155,10 +155,7 @@ class ColorUseTypeSelector extends Component {
           }
       }
     };
-    this.onSelectColorOption = _ref => {
-      let {
-        value: color_option
-      } = _ref;
+    this.onSelectColorOption = color_option => {
       const {
         chart,
         labelColorConfigs
@@ -269,7 +266,7 @@ class ColorUseTypeSelector extends Component {
       return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
         id: id,
         className: "selected-specific-color mt-1",
-        ref: ref => this.colorPickerContainerRef = ref
+        ref: ref => this.colorSpecialContainerRef = ref
       }, /*#__PURE__*/React.createElement("div", {
         className: "selected-specific-color-wrapper"
       }, /*#__PURE__*/React.createElement("span", {
@@ -314,7 +311,9 @@ class ColorUseTypeSelector extends Component {
       }
       return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
         id: id,
-        className: classnames('statistic-color-rules-toggle', 'mt-1', hasRules ? 'statistic-edit-color-rule' : 'statistic-add-color-rule'),
+        className: classnames('sea-chart-color-rules-toggle', 'mt-1', hasRules ? 'sea-chart-edit-color-rule' : 'sea-chart-add-color-rule'),
+        tabIndex: "0",
+        ref: ref => this.colorRulesContainerRef = ref,
         onClick: this.showColorRulesEditor
       }, hasRules ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", null, msg), /*#__PURE__*/React.createElement("i", {
         className: "dtable-font dtable-icon-rename"
@@ -347,12 +346,12 @@ class ColorUseTypeSelector extends Component {
       color_option
     } = chart;
     const selectedColorOption = this.colorOptions.find(colorOption => colorOption.value === color_option) || this.colorOptions[0];
-    return /*#__PURE__*/React.createElement("div", {
-      className: "statistic-chart-parameter-item"
-    }, /*#__PURE__*/React.createElement("label", null, intl.get('Color')), /*#__PURE__*/React.createElement(DTableSelect, {
+    return /*#__PURE__*/React.createElement(FormGroup, {
+      className: "sea-chart-color-type-selector"
+    }, /*#__PURE__*/React.createElement(Label, null, intl.get('Color')), /*#__PURE__*/React.createElement(DTableCustomizeSelect, {
       value: selectedColorOption,
       options: this.colorOptions,
-      onChange: this.onSelectColorOption
+      onSelectOption: this.onSelectColorOption
     }), color_option === TYPE_COLOR_USING.USE_SPECIFIC_COLORS && this.renderSpecificColorSelector(), color_option === TYPE_COLOR_USING.USE_RULES && this.renderColorRulesEditor());
   }
 }

package/dist/settings/widgets/numeric-summary-item.js

@@ -64,12 +64,19 @@ class NumericSummaryItem extends Component {
         onDeleteNumericColumn,
         removeCurrentSelectedOptions,
         setCurrentSelectedOptions,
-        currentAxisesIndex
+        currentAxisesIndex,
+        onDelete
       } = this.props;
       //  remove current selected options on selectedColumnOption list
-      removeCurrentSelectedOptions(this.selectedColumnOption.column, currentAxisesIndex);
-      setCurrentSelectedOptions();
-      onDeleteNumericColumn(index);
+      if (this.selectedColumnOption) {
+        removeCurrentSelectedOptions(this.selectedColumnOption.column, currentAxisesIndex);
+        setCurrentSelectedOptions();
+      }
+      if (onDelete) {
+        onDelete(index);
+      } else {
+        onDeleteNumericColumn(index);
+      }
     };
     this.state = {
       isExpand: true
@@ -124,7 +131,7 @@ class NumericSummaryItem extends Component {
     }, /*#__PURE__*/React.createElement(DTableSelect, {
       value: selectedColumnOption,
       placeholder: intl.get('Select_a_column'),
-      onChange: option => this.props.onColumnOptionChange(option, selectedColumnOption, index, currentAxisesIndex),
+      onChange: option => this.props.onColumnOptionChange(option, index, selectedColumnOption, currentAxisesIndex),
       options: availableOptions,
       style: {
         color: '#6e7687'