sea-chart 1.1.18 → 1.1.19

package/dist/settings/completeness-settings/callbacks/callbacks.js

@@ -1,6 +1,5 @@
 import { CellType, DATE_COLUMN_OPTIONS } from 'dtable-utils';
 import { CHART_SUMMARY_TYPE, GEOLOCATION_FORMAT_CITY, GEOLOCATION_FORMAT_MAP } from '../../../constants';
-import { eventStopPropagation } from '../../../utils';
 const getNewUpdate = (column, chart, fieldKey) => {
   const {
     config
@@ -58,9 +57,10 @@ export const onIncludeEmptyChange = (event, chart, onChange) => {
   const {
     x_axis_include_empty_cells
   } = config;
-  onChange && onChange({
+  const update = {
     x_axis_include_empty_cells: !x_axis_include_empty_cells
-  });
+  };
+  onChange && onChange(update);
 };
 export const onGroupbyDateGranularityChange = (option, chart, onChange) => {
   const {

package/dist/settings/completeness-settings/data-settings/completion-settings.js

@@ -1,7 +1,7 @@
 import _DTableSelect from "dtable-ui-component/lib/DTableSelect";
 import React from 'react';
 import { FormGroup, Label } from 'reactstrap';
-import { getTableById } from 'dtable-utils';
+import { CellType, getTableById } from 'dtable-utils';
 import intl from '../../../intl';
 import { NUMBERIC_COLUMN_TYPE } from '../../../constants';
 import { getColumnOptions } from '../../../utils/column-utils';
@@ -18,8 +18,15 @@ export default function CompletionSettings(_ref) {
   } = chart.config;
   const selectedTable = getTableById(tables, table_id);
   const columns = selectedTable && Array.isArray(selectedTable.columns) ? selectedTable.columns : [];
-  const columnOptions = getColumnOptions(columns);
-  const options = columnOptions.filter(column => NUMBERIC_COLUMN_TYPE.includes(column.value.type));
+  const availableColumns = columns.filter(column => {
+    if (column.type === CellType.FORMULA) {
+      const type = column.data.result_type;
+      return type === CellType.NUMBER;
+    } else {
+      return NUMBERIC_COLUMN_TYPE.includes(column.type);
+    }
+  });
+  const options = getColumnOptions(availableColumns);
   const completedOption = options.find(option => option.value.key === completed_column_key);
   const targetOption = options.find(option => option.value.key === target_column_key);
   function handleCompletedChange(option) {

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

@@ -1,4 +1,5 @@
 import _DTableCustomizeSelect from "dtable-ui-component/lib/DTableCustomizeSelect";
+import _DTableColorPicker from "dtable-ui-component/lib/DTableColorPicker";
 import React, { Component } from 'react';
 import classnames from 'classnames';
 import { Input, FormGroup, Label } from 'reactstrap';
@@ -19,29 +20,33 @@ class ColorUseTypeSelector extends Component {
   constructor(props) {
     super(props);
     this.getPopoverStyle = () => {
-      if (!this.colorSpecialContainerRef) return {};
-      const {
-        top,
-        height
-      } = this.colorSpecialContainerRef.getBoundingClientRect();
-      const {
-        clientHeight
-      } = document.body;
-      const selectTop = top + height;
-      if (clientHeight - selectTop < 247) {
-        // 247: ReactColor's height
-        return {
-          position: 'absolute',
-          left: '20px',
-          bottom: '2.375rem',
-          zIndex: '2'
+      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
         };
-      }
-      return {
-        position: 'absolute',
-        left: '20px',
-        zIndex: '2'
-      };
+        if (clientHeight - selectTop < colorPickerHeight) {
+          style = {
+            ...style,
+            bottom: '2.375rem'
+          };
+        }
+        this.setState({
+          popoverStyle: style
+        });
+      }, 10);
     };
     this.getUsableColorTypes = chartType => {
       switch (chartType) {
@@ -196,6 +201,8 @@ class ColorUseTypeSelector extends Component {
       }, () => {
         if (!this.state.isShowColorSelector) {
           this.modifySpecificColor(this.state.specificColor);
+        } else {
+          this.getPopoverStyle();
         }
       });
     };
@@ -237,10 +244,9 @@ class ColorUseTypeSelector extends Component {
         this.props.updateChart(updatedChart);
       });
     };
-    this.modifyHex = colorSelection => {
-      if (colorSelection.hex === this.state.specificColor) return;
+    this.modifyHex = color => {
       this.setState({
-        specificColor: colorSelection.hex
+        specificColor: color
       });
     };
     this.modifyColorRules = colorRules => {
@@ -268,7 +274,8 @@ class ColorUseTypeSelector extends Component {
     };
     this.renderSpecificColorSelector = () => {
       const {
-        specificColor
+        specificColor,
+        popoverStyle
       } = this.state;
       const id = 'statistic_selected_specific_color';
       return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
@@ -288,17 +295,13 @@ class ColorUseTypeSelector extends Component {
         className: "specific-color-input",
         value: specificColor,
         onChange: event => this.modifySpecificColor(event.target.value)
-      }), this.state.isShowColorSelector && /*#__PURE__*/React.createElement("div", {
-        style: this.getPopoverStyle()
-      }, /*#__PURE__*/React.createElement("div", {
-        className: "position-fixed",
-        style: COVER,
-        onClick: this.onToggleColorSelector
-      }), /*#__PURE__*/React.createElement(ReactColor, {
-        disableAlpha: true,
+      }), this.state.isShowColorSelector && /*#__PURE__*/React.createElement(_DTableColorPicker, {
+        ref: this.colorPickerRef,
         color: specificColor,
-        onChange: this.modifyHex
-      })))));
+        onSubmit: this.modifyHex,
+        onToggle: this.onToggleColorSelector,
+        popoverStyle: popoverStyle
+      }))));
     };
     this.renderColorRulesEditor = () => {
       const {
@@ -341,10 +344,12 @@ class ColorUseTypeSelector extends Component {
     this.state = {
       isShowColorSelector: false,
       isShowColorRulesEditor: false,
-      specificColor: this.getSelectedSpecificColor()
+      specificColor: this.getSelectedSpecificColor(),
+      popoverStyle: {}
     };
     this.colorOptions = this.initColorTypeOptions();
     this.isToggleColorRulesEditor = false;
+    this.colorPickerRef = React.createRef();
   }
   render() {
     const {

package/dist/settings/widgets/y-axis-group-settings.js

@@ -404,7 +404,7 @@ class YAxisGroupSettings extends Component {
     } = chart.config;
 
     // if user do not select Single Numeric Column, then do not use it as the first config of multiple numeric column
-    const hasSingleNumericColumnConfig = !!(y_axis_summary_column_key && y_axis_summary_method);
+    const hasSingleNumericColumnConfig = !!(y_axis_summary_column_key && y_axis_summary_type === CHART_SUMMARY_TYPE.ADVANCED);
     const hasMultipleNumericColumnsConfig = column_groupby_multiple_numeric_column;
     return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(FormGroup, {
       className: "sea-chart-parameter-item"

package/dist/utils/chart-utils/original-data-utils/basic-chart-calculator.js

@@ -394,7 +394,7 @@ async function calculateGeolocationBasicChart(chart, value, _ref3) {
   if (type && type.includes('world')) {
     geolocationGranularity = geoColumn.type === CellType.GEOLOCATION ? chart.geolocation_granularity : null;
   } else {
-    geolocationGranularity = fixGeoGranularity(chart);
+    geolocationGranularity = fixGeoGranularity(chart.map_level, chart.map_location);
   }
   const summaryColumn = getTableColumnByKey(table, summary_column_key);
   const statRows = await getViewRows(view, table);

package/dist/utils/chart-utils/sql-statistics-utils.js

@@ -643,7 +643,9 @@ SQLStatisticsUtils.basicChartSQLResult2JavaScript = async (chart, sqlRows, chart
     sort_type,
     y_axis_summary_type,
     y_axis_summary_column_key,
-    y_axis_summary_method
+    y_axis_summary_method,
+    x_axis_include_empty_cells,
+    groupby_include_empty_cells
   } = config;
   const {
     groupbyColumn
@@ -661,7 +663,7 @@ SQLStatisticsUtils.basicChartSQLResult2JavaScript = async (chart, sqlRows, chart
     if (y_axis_summary_type === CHART_SUMMARY_TYPE.ADVANCED) {
       formatted_value = getFormattedValue(cellValue, y_axis_summary_column_key, y_axis_summary_method);
     }
-    if (BaseUtils.isValidCellValue(cellValue)) {
+    if (BaseUtils.isValidCellValue(cellValue, x_axis_include_empty_cells || groupby_include_empty_cells)) {
       const key = await _SQLStatisticsUtils.getGroupLabelFromDB(cellValue, groupbyColumn, chart.config);
       if (isGroupbyColumnDataAsAnArray) {
         if (!Array.isArray(key) || key.length === 0) {
@@ -744,6 +746,7 @@ SQLStatisticsUtils.customChartSQLResult2JavaScript = async (chart, sqlRows, char
     x_axis_date_granularity,
     x_axis_geolocation_granularity,
     x_axis_include_empty,
+    x_axis_include_empty_cells,
     y_axises
   } = chart.config;
   const {
@@ -781,7 +784,7 @@ SQLStatisticsUtils.customChartSQLResult2JavaScript = async (chart, sqlRows, char
     const isEmpty = !label;
     const groupItems = [];
     summaryMethods.forEach((summaryMethod, index) => {
-      if (!x_axis_include_empty && isEmpty) return;
+      if (!(x_axis_include_empty_cells || x_axis_include_empty) && isEmpty) return;
       let value = row[summaryMethod] || 0;
       let formatted_value = value;
       value = formatNumericValue(value, numericColumns[index]);
@@ -807,12 +810,19 @@ SQLStatisticsUtils.customChartSQLResult2JavaScript = async (chart, sqlRows, char
         name: names
       } = item;
       if (!Array.isArray(names)) return;
-      names.forEach(name => {
+      if (!(names === null || names === void 0 ? void 0 : names.length)) {
         takenApart.push({
           ...item,
-          name
+          name: null
         });
-      });
+      } else {
+        names.forEach(name => {
+          takenApart.push({
+            ...item,
+            name
+          });
+        });
+      }
     });
     takenApart.forEach(item => {
       const {
@@ -1662,6 +1672,11 @@ SQLStatisticsUtils.completenessSQlResult = (chart, sqlRows, chartSQLMap, tables)
     if (nameColumnDataAsAnArray) {
       const sumSqlRows = sqlRows.reduce((acc, row) => {
         const names = row[name_column.key];
+        if (!names) {
+          row[name_column.key] = intl.get('Empty');
+          acc[intl.get('Empty')] = row;
+          return acc;
+        }
         names.forEach(name => {
           if (!acc[name]) {
             row[name_column.key] = name;
@@ -1670,6 +1685,13 @@ SQLStatisticsUtils.completenessSQlResult = (chart, sqlRows, chartSQLMap, tables)
             const accRow = acc[name];
             Object.keys(row).forEach(key => {
               if (key === completed_column.key || key === target_column.key) {
+                // in case of null
+                if (!row[key]) {
+                  row[key] = 0;
+                }
+                if (!accRow[key]) {
+                  accRow[key] = 0;
+                }
                 accRow[key] = accRow[key] + row[key];
               }
             });
@@ -1681,6 +1703,11 @@ SQLStatisticsUtils.completenessSQlResult = (chart, sqlRows, chartSQLMap, tables)
     } else {
       const sumSqlRows = sqlRows.reduce((acc, row) => {
         const nameValue = row[name_column.key];
+        if (!nameValue) {
+          row[name_column.key] = intl.get('Empty');
+          acc[intl.get('Empty')] = row;
+          return acc;
+        }
         if (!acc[nameValue]) {
           acc[nameValue] = row;
         } else {
@@ -1698,8 +1725,14 @@ SQLStatisticsUtils.completenessSQlResult = (chart, sqlRows, chartSQLMap, tables)
   } else {
     if (nameColumnDataAsAnArray) {
       const sumSqlRows = sqlRows.reduce((acc, row) => {
-        const names = row[name_column.key];
         const groupby = row[sqlColumnGroupByColumnKey];
+        const names = row[name_column.key];
+        if (!names) {
+          const key = "empty_".concat(groupby);
+          row[name_column.key] = intl.get('Empty');
+          acc[key] = row;
+          return acc;
+        }
         names.forEach(name => {
           const key = "".concat(name, "_").concat(groupby);
           if (!acc[key]) {
@@ -1721,6 +1754,12 @@ SQLStatisticsUtils.completenessSQlResult = (chart, sqlRows, chartSQLMap, tables)
       const sumSqlRows = sqlRows.reduce((acc, row) => {
         const nameValue = row[name_column.key];
         const groupby = row[sqlColumnGroupByColumnKey];
+        if (!nameValue) {
+          const key = "empty_".concat(groupby);
+          row[name_column.key] = intl.get('Empty');
+          acc[key] = row;
+          return acc;
+        }
         const key = "".concat(nameValue, "_").concat(groupby);
         if (!acc[key]) {
           acc[key] = row;

package/dist/view/wrapper/area.js

@@ -2,7 +2,7 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import classNames from 'classnames';
 import { CellType } from 'dtable-ui-component/lib/constants';
-import { CHART_LINE_TYPES, CHART_STYLE_COLORS, CHART_THEME_COLOR, CHART_TYPE, TYPE_COLOR_USING } from '../../constants';
+import { CHART_LINE_TYPES, CHART_STYLE_COLORS, CHART_THEME_COLOR, CHART_TYPE, EMPTY_NAME, TYPE_COLOR_USING } from '../../constants';
 import intl from '../../intl';
 import { BaseUtils, isFunction } from '../../utils';
 import { SUPPORT_SINGLE_SELECT_THEMES_OPTIONS } from '../../constants/color-rules';
@@ -147,7 +147,7 @@ class Area extends ChartComponent {
         return {
           title: isAreaGroup && isMultipleSummary ? !name && typeof name !== 'number' ? intl.get('Empty') : name : title,
           value: BaseUtils.getSummaryValueDisplayString(summaryColumn, value, y_axis_summary_method),
-          name: group_name
+          name: isAreaGroup && isMultipleSummary ? !group_name && typeof group_name !== 'number' ? intl.get(EMPTY_NAME) : group_name : name
         };
       }).style({
         fillOpacity: 0.3

package/dist/view/wrapper/chart-component.js

@@ -92,7 +92,7 @@ export default class ChartComponent extends Component {
       });
       return chartGroupData;
     };
-    this.getGroupMap = data => {
+    this.getNameMap = data => {
       const groupMap = {};
       data.forEach(item => {
         if (!groupMap[item.name]) {
@@ -123,24 +123,47 @@ export default class ChartComponent extends Component {
      * @returns {Object} - The updated groupMap object.
      */
     this.markFirstOrLast = (data, position) => {
-      data = data.filter(v => v.value);
+      const nameMap = this.getNameMap(data);
       const groupNameList = this.getGroupNameOrder(data);
-      const groupMap = this.getGroupMap(data);
       // g2 renders group_name that already shows first, so we need groupNameList to sort group with shown order
-      Object.values(groupMap).forEach(group => {
-        group.forEach(item => {
+      Object.values(nameMap).forEach(item => {
+        // const groupNameList = this.getGroupNameOrder(item);
+        item.forEach(item => {
           item.indexOfGroupName = groupNameList.indexOf(item.group_name);
         });
-        group.sort((a, b) => a.indexOfGroupName - b.indexOfGroupName);
+        item.sort((a, b) => a.indexOfGroupName - b.indexOfGroupName);
         if (position === 'first') {
-          group[0].isFirst = 1;
+          var _targetMarkItem3;
+          // mark the first item in each group,but if item value is 0, mark the next item
+          let targetMarkItem = item[0],
+            i = 1;
+          while (!((_targetMarkItem = targetMarkItem) === null || _targetMarkItem === void 0 ? void 0 : _targetMarkItem.value) && !Number.isNaN((_targetMarkItem2 = targetMarkItem) === null || _targetMarkItem2 === void 0 ? void 0 : _targetMarkItem2.value)) {
+            var _targetMarkItem, _targetMarkItem2;
+            targetMarkItem = item[i];
+            i++;
+            if (i >= item.length) break;
+          }
+          if (!((_targetMarkItem3 = targetMarkItem) === null || _targetMarkItem3 === void 0 ? void 0 : _targetMarkItem3.value)) return;
+          targetMarkItem.isFirst = 1;
         } else if (position === 'last') {
-          group[group.length - 1].isLast = 1;
+          var _targetMarkItem6;
+          // same
+          const l = item.length;
+          let targetMarkItem = item[l - 1],
+            i = l - 2;
+          while (!((_targetMarkItem4 = targetMarkItem) === null || _targetMarkItem4 === void 0 ? void 0 : _targetMarkItem4.value) && !Number.isNaN((_targetMarkItem5 = targetMarkItem) === null || _targetMarkItem5 === void 0 ? void 0 : _targetMarkItem5.value)) {
+            var _targetMarkItem4, _targetMarkItem5;
+            targetMarkItem = item[i];
+            i--;
+            if (i < 0) break;
+          }
+          if (!((_targetMarkItem6 = targetMarkItem) === null || _targetMarkItem6 === void 0 ? void 0 : _targetMarkItem6.value)) return;
+          targetMarkItem.isLast = 1;
         } else {
           console.error('on markFirstOrLast: unknown position');
         }
       });
-      return groupMap;
+      return nameMap;
     };
     this.getGroupMapForCompleteness = data => {
       const groupMap = {};
@@ -380,7 +403,7 @@ export default class ChartComponent extends Component {
             fontSize: theme.legendFontSize
           },
           formatter: name => {
-            if (!name && typeof name !== 'number') {
+            if (!name && typeof name !== 'number' || name.trim() === 'undefined' || name.trim() === 'null') {
               return intl.get(EMPTY_NAME);
             } else if (name === '_Others') {
               return intl.get('Others');

package/dist/view/wrapper/combination.js

@@ -19,6 +19,7 @@ class Combination extends ChartComponent {
       let {
         result: data
       } = this.props;
+      data = BaseUtils.formatEmptyName(data, '', intl.get('Empty'));
       this.draw(data);
     };
     this.draw = data => {

package/dist/view/wrapper/funnel.js

@@ -162,9 +162,6 @@ class Funnel extends ChartComponent {
           });
         }
       });
-
-      // console.log(funnel_show_overall_rate);
-
       if (funnel_show_legend) {
         this.setLegend('name', theme, 'top-right');
       } else {

package/dist/view/wrapper/line-group.js

@@ -97,7 +97,7 @@ class LineGroup extends ChartComponent {
         return {
           title: !name && typeof name !== 'number' ? intl.get(EMPTY_NAME) : name,
           value: BaseUtils.getSummaryValueDisplayString(summaryColumn, value, y_axis_summary_method),
-          name: group_name
+          name: !group_name && typeof group_name !== 'number' ? intl.get(EMPTY_NAME) : group_name
         };
       });
       let point;

package/dist/view/wrapper/pie.js

@@ -93,7 +93,7 @@ class Pie extends ChartComponent {
         }
       }).tooltip('name*value*percent', (name, value, percent) => {
         let title = name;
-        if (!name || name === 'undefined') {
+        if (!name || name.trim() === 'undefined' || name.trim() === 'null') {
           title = intl.get('Empty');
         } else if (name === '_Others') {
           title = intl.get('Others');

package/dist/view/wrapper/ring.js

@@ -112,7 +112,7 @@ class Ring extends ChartComponent {
         }
       }).tooltip('name*value*percent', (name, value, percent) => {
         let title = name;
-        if (!name || name === 'undefined') {
+        if (!name || name === 'undefined' || name.trim() === 'undefined' || name.trim() === 'null') {
           title = intl.get('Empty');
         } else if (name === '_Others') {
           title = intl.get('Others');

package/dist/view/wrapper/table/pivot-table-display-name.js

@@ -194,6 +194,14 @@ class PivotTableDisplayName extends React.Component {
                 validValue = original_name;
               }
             }
+
+            // value is empty
+            if (validValue[0] === null || validValue[0] === undefined) {
+              return /*#__PURE__*/React.createElement("div", {
+                title: String(value),
+                "aria-label": String(value)
+              }, "(", intl.get('Empty'), ")");
+            }
             const unknowEmails = validValue.filter(email => !getCollaborator(collaborators, email));
 
             // if need to query unknowEmails

package/dist/view/wrapper/treemap.js

@@ -56,6 +56,7 @@ class Treemap extends ChartComponent {
         summary_method
       } = chart.config;
       let colorsTheme = BaseUtils.getCurrentTheme(chartColorTheme);
+      data = BaseUtils.formatEmptyName(data, '', intl.get('Empty'));
       const {
         data: newData,
         colorMap

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sea-chart",
-  "version": "1.1.18",
+  "version": "1.1.19",
   "main": "./dist/index.js",
   "dependencies": {
     "@antv/data-set": "0.11.8",