sea-chart 0.0.36 → 0.0.37

package/dist/constants/index.js

@@ -63,7 +63,22 @@ export const BASIC_NUMBER_CARD_CALCULATION_METHOD = 'Row_count';
 export const CHART_DATE_SUMMARY_CALCULATION_METHOD = ['Max', 'Min', 'Distinct_values'];
 export const CHART_SUPPORT_COLUMNS = [CellType.DATE, CellType.SINGLE_SELECT, CellType.MULTIPLE_SELECT, CellType.COLLABORATOR, CellType.TEXT, CellType.NUMBER, CellType.FORMULA, CellType.LINK_FORMULA, CellType.GEOLOCATION, CellType.LINK, CellType.MTIME, CellType.CTIME, CellType.CREATOR, CellType.LAST_MODIFIER, CellType.CHECKBOX, CellType.RATE, CellType.DURATION];
 export const CHART_SUPPORT_SORT_COLUMNS = [CellType.TEXT, CellType.NUMBER, CellType.DATE, CellType.SINGLE_SELECT, CellType.FORMULA, CellType.LINK_FORMULA, CellType.CTIME, CellType.MTIME, CellType.RATE, CellType.DURATION];
-export const LABEL_COLORS = ['#2a67d1', '#4ecccb', '#59cb74', '#fbd44a', '#f4667c', '#9860e5', '#9f8cf1', '#dc82d2', '#eaa775', '#addf84', '#85e0be', '#89d2ea'];
+
+// export const LABEL_COLORS = [
+//   '#2a67d1',
+//   '#4ecccb',
+//   '#59cb74',
+//   '#fbd44a',
+//   '#f4667c',
+//   '#9860e5',
+//   '#9f8cf1',
+//   '#dc82d2',
+//   '#eaa775',
+//   '#addf84',
+//   '#85e0be',
+//   '#89d2ea'
+// ];
+
 export const TIME_COLUMN_LIST = [CellType.CTIME, CellType.MTIME, CellType.DATE];
 export const DATE_GRANULATES = [CHART_SUMMARY_TYPE.DAY, CHART_SUMMARY_TYPE.WEEK, CHART_SUMMARY_TYPE.MONTH, CHART_SUMMARY_TYPE.QUARTER, CHART_SUMMARY_TYPE.YEAR];
 export const GEOLOCATION_GRANULATES = [CHART_SUMMARY_TYPE.PROVINCE, CHART_SUMMARY_TYPE.CITY, CHART_SUMMARY_TYPE.DISTRICT];
@@ -173,6 +188,10 @@ export const CHART_THEME_COLOR = {
     gridColor: '#F3F3F3',
     XAxisColor: '#CCCCCC',
     labelColor: '#999999',
+    ringLabelColor: '#212529',
+    annotationTitleFontColor: '#666666',
+    annotationValueFontColor: '#212529',
+    annotationFontSize: 18,
     cardColor: '#545454',
     legendTextColor: '#333333',
     legendFontSize: 14,

package/dist/model/combination.js

@@ -1,5 +1,5 @@
 import { isBoolean } from '../utils';
-import { CHART_TYPE, CHART_SUMMARY_TYPE } from '../constants';
+import { CHART_TYPE, CHART_SUMMARY_TYPE, CHART_LINE_TYPES } from '../constants';
 import BaseModel from './base-model';
 class Combination extends BaseModel {
   constructor(options) {
@@ -33,6 +33,7 @@ class Combination extends BaseModel {
     this.y_axis_max_right = options.y_axis_max_right;
     this.display_data = isBoolean(options.y_axis_show_value) ? options.y_axis_show_value : false;
     this.label_font_size = options.label_font_size;
+    this.line_type = options.line_type || CHART_LINE_TYPES[1];
   }
 }
 export default Combination;

package/dist/model/ring.js

@@ -1,6 +1,6 @@
-import BaseModel from './base-model';
 import { isBoolean } from '../utils';
 import { CHART_TYPE, CHART_LABEL_POSITIONS, CHART_LABEL_FORMATS, CHART_SUMMARY_TYPE } from '../constants';
+import BaseModel from './base-model';
 class Ring extends BaseModel {
   constructor(options) {
     super({
@@ -21,6 +21,7 @@ class Ring extends BaseModel {
     this.minimum_slice_percent = options.minimum_slice_percent;
     this.sort_type = options.sort_type;
     this.label_font_size = options.label_font_size;
+    this.show_annotation = options.show_annotation || true;
   }
 }
 export default Ring;

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

@@ -8,6 +8,7 @@ import DisplayValuesSettings from '../widgets/display-values-settings';
 import { eventStopPropagation } from '../../utils';
 import { X_LABEL_POSITIONS, Y_LABEL_POSITIONS, LABEL_POSITION_TYPE_SHOW } from '../../constants';
 import intl from '../../intl';
+import SelectLineType from '../widgets/select-line-type';
 const StyleSettings = _ref => {
   let {
     chart,
@@ -96,12 +97,16 @@ const StyleSettings = _ref => {
     y_axis_min_right,
     y_axis_max_right,
     display_data,
-    label_font_size
+    label_font_size,
+    line_type
   } = config;
   const xAxisLabelPosition = xAxisLabelOptions.find(option => option.value === x_axis_label_position) || xAxisLabelOptions[0];
   const yLeftAxisLabelPosition = yAxisLabelOptions.find(option => option.value === y_axis_left_label_position) || yAxisLabelOptions[0];
   const yRightAxisLabelPosition = yAxisLabelOptions.find(option => option.value === y_axis_right_label_position) || yAxisLabelOptions[0];
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(FormGroup, {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(SelectLineType, {
+    selectedLineType: line_type,
+    onChange: onChange
+  }), /*#__PURE__*/React.createElement(Divider, null), /*#__PURE__*/React.createElement(FormGroup, {
     className: "sea-chart-parameter-item"
   }, /*#__PURE__*/React.createElement(Label, null, intl.get(xLabel)), /*#__PURE__*/React.createElement(Switch, {
     key: "x_axis_show_label",

package/dist/settings/widgets/select-line-type/index.js

@@ -5,7 +5,7 @@ import { CHART_LINE_TYPES } from '../../../constants';
 import intl from '../../../intl';
 function SelectLineType(_ref) {
   let {
-    selectedLineType,
+    selectedLineType = CHART_LINE_TYPES[1],
     onChange
   } = _ref;
   const onChangeLineType = lineType => {

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

@@ -2,7 +2,7 @@ var _SQLStatisticsUtils;
 import dayjs from 'dayjs';
 import { CellType, MULTIPLE_CELL_VALUE_COLUMN_TYPE_MAP, getFormulaDisplayString, getPrecisionNumber, getTableById, getTableColumnByKey, isNumber } from 'dtable-utils';
 import { isObject } from 'lodash';
-import { CHART_SUMMARY_TYPE, CHART_TYPE, SUPPORT_DATA_SORT_CHART_TYPES, LABEL_COLORS, TABLE_DIMENSIONS, Y_AXIS_TYPE_PREFIX } from '../../constants';
+import { CHART_SUMMARY_TYPE, CHART_TYPE, SUPPORT_DATA_SORT_CHART_TYPES, LABEL_COLORS, TABLE_DIMENSIONS, Y_AXIS_TYPE_PREFIX, STYLE_COLORS } from '../../constants';
 import { chartColumn2SqlColumn, summaryMethodColumn2SqlColumn } from '../sql';
 import { getClientLinkDisplayString } from '../cell-format-utils';
 import context from '../../context';
@@ -1025,17 +1025,33 @@ SQLStatisticsUtils.combinationSQLResult2Javascript = (chart, sqlRows, chartSQLMa
     let leftSummaryColumn = getTableColumnByKey(table, y_axis_left_summary_column);
     const summaryMethod = y_axis_left_summary_method.toUpperCase();
     const {
-      key: groupItem
+      key
     } = summaryMethodColumn2SqlColumn(summaryMethod, leftSummaryColumn || {});
-    leftSummaryColumn && !groupItems.includes(groupItem) && groupItems.push(groupItem);
+    const groupItem = {
+      sqlName: key,
+      column: leftSummaryColumn
+    };
+    const exists = groupItems.find(v => v.sqlName === key);
+    if (!exists && leftSummaryColumn) {
+      groupItems.push(groupItem);
+    }
+    // leftSummaryColumn && !groupItems.includes(groupItem) && groupItems.push(groupItem);
     y_axis_left_group_by_numeric_columns.forEach((item, index) => {
       const column = getTableColumnByKey(table, item.column_key);
       if (column) {
         const itemSummaryMethod = item.summary_method.toUpperCase();
         const {
-          key: groupItem
+          key
         } = summaryMethodColumn2SqlColumn(itemSummaryMethod, column || {});
-        !groupItems.includes(groupItem) && groupItems.push(groupItem);
+        const groupItem = {
+          sqlName: key,
+          column
+        };
+        const exists = groupItems.find(v => v.sqlName === key);
+        if (!exists) {
+          groupItems.push(groupItem);
+        }
+        // !groupItems.includes(groupItem) && groupItems.push(groupItem);
       }
     });
     sqlRows.forEach((item, index) => {
@@ -1046,7 +1062,10 @@ SQLStatisticsUtils.combinationSQLResult2Javascript = (chart, sqlRows, chartSQLMa
         valueRight = BaseUtils.getPrecisionNumber(valueRight, rightSummaryColumn.data);
       }
       groupItems.forEach((groupItem, index) => {
-        let value = item[groupItem] || 0;
+        var _groupItem$column;
+        const sqlName = groupItem.sqlName;
+        const groupName = (_groupItem$column = groupItem.column) === null || _groupItem$column === void 0 ? void 0 : _groupItem$column.name;
+        let value = item[sqlName] || 0;
         if (y_axis_right_summary_type === CHART_SUMMARY_TYPE.ADVANCED) {
           value = BaseUtils.getPrecisionNumber(value, leftSummaryColumn.data);
         }
@@ -1054,7 +1073,8 @@ SQLStatisticsUtils.combinationSQLResult2Javascript = (chart, sqlRows, chartSQLMa
           name: key,
           value_left: value,
           value_right: valueRight,
-          color: LABEL_COLORS[index % 12]
+          group_name: groupName,
+          color: STYLE_COLORS[0].colors[index % 12]
         });
       });
     });

package/dist/utils/custom-g2.js

@@ -91,6 +91,7 @@ import ScaleTranslate from '@antv/g2/esm/interaction/action/view/scale-translate
 import ScaleZoom from '@antv/g2/esm/interaction/action/view/scale-zoom';
 import { getAngle, polarToCartesian } from '@antv/g2/esm/util/graphics';
 import { rotate, transform, translate, zoom } from '@antv/g2/esm/util/transform';
+import { Action, registerShape } from '@antv/g2';
 export { getRectWithCornerRadius } from '@antv/g2/esm/geometry/shape/interval/util';
 // 注册 G 渲染引擎
 registerEngine('canvas', CanvasEngine);
@@ -208,6 +209,47 @@ registerAction('reset-button', ButtonAction, {
   name: 'reset-button',
   text: 'reset'
 });
+registerShape('interval', 'withGap', {
+  draw(cfg, container) {
+    const points = cfg.points;
+    let path = [];
+    path.push(['M', points[0].x, points[0].y]);
+    path.push(['L', points[1].x, points[1].y - 0.0015]);
+    path.push(['L', points[2].x, points[2].y - 0.0015]);
+    path.push(['L', points[3].x, points[3].y]);
+    path.push('Z');
+    path = this.parsePath(path);
+    return container.addShape('path', {
+      attrs: {
+        fill: cfg.color,
+        path
+      }
+    });
+  }
+});
+class HighlightXOnlyBar extends Action {
+  highlight() {
+    const elements = this.context.view.geometries[0].elements;
+    elements.forEach(element => {
+      const {
+        data
+      } = element.getModel();
+      if (data.type === 'bar') {
+        element.setState('active', true);
+      } else {
+        element.hide();
+      }
+    });
+  }
+  reset() {
+    const elements = this.context.view.geometries[0].elements;
+    elements.forEach(element => {
+      element.setState('active', false);
+      element.show();
+    });
+  }
+}
+registerAction('highlight-x-only-bar', HighlightXOnlyBar);
 
 // 注册默认的 Interaction 交互行为
 function isPointInView(context) {

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

@@ -367,17 +367,15 @@ class ChartDataSQL {
         let summary_column_name = '';
         if (right_summary_type === 'COUNT') {
           summary_column_name = this._summary_column_2_sql('COUNT', groupby_column);
+          return "SELECT ".concat(groupby_column_name, ", ").concat(summary_column_name, " FROM ").concat(this.table_name, " ").concat(this.filter_sql, " GROUP BY ").concat(groupby_column_name, " LIMIT 0, 5000");
         } else {
           const right_summary_column = this._get_column_by_key(y_axis_right_summary_column);
           if (right_summary_column) {
             const right_summary_method = y_axis_right_summary_method.toUpperCase();
             summary_column_name = this._summary_column_2_sql(right_summary_method, right_summary_column);
+            return "SELECT ".concat(groupby_column_name, ", COUNT(").concat(groupby_column_name, "), ").concat(summary_column_name, " FROM ").concat(this.table_name, " ").concat(this.filter_sql, " GROUP BY ").concat(groupby_column_name, " LIMIT 0, 5000");
           }
         }
-        if (summary_column_name) {
-          return "SELECT ".concat(groupby_column_name, ", ").concat(summary_column_name, " FROM ").concat(this.table_name, " ").concat(this.filter_sql, " GROUP BY ").concat(groupby_column_name, " LIMIT 0, 5000");
-        }
-        return "SELECT ".concat(groupby_column_name, " FROM ").concat(this.table_name, " ").concat(this.filter_sql, " GROUP BY ").concat(groupby_column_name, " LIMIT 0, 5000");
       }
       if (y_axis_left_group_by_multiple_numeric_column) {
         let column_groupby_numeric_columns = y_axis_left_group_by_numeric_columns.slice(0);

package/dist/view/wrapper/bar.js

@@ -78,7 +78,7 @@ class Bar extends ChartComponent {
       this.chart.interval().label(y_axis_show_value ? 'value' : false, {
         style: {
           fontSize: BaseUtils.getLabelFontSize(label_font_size),
-          fill: theme.labelColor,
+          fill: theme.ringLabelColor,
           stroke: '#fff',
           lineWidth: 1
         }

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

@@ -347,12 +347,10 @@ export default class ChartComponent extends Component {
       }
       return label;
     };
-    // set legend
-    this.setLegend = function (legendName) {
-      let theme = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : CHART_THEME_COLOR['light'];
-      let legendPosition = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 'bottom';
-      if (!_this.chart) return;
-      _this.chart.legend(legendName, {
+    this.getLegendConfig = function () {
+      let theme = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : CHART_THEME_COLOR['light'];
+      let legendPosition = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'top-right';
+      return {
         // custom: true,
         position: legendPosition,
         itemName: {
@@ -364,6 +362,8 @@ export default class ChartComponent extends Component {
           formatter: name => {
             if (!name && typeof name !== 'number') {
               return intl.get(EMPTY_NAME);
+            } else if (name === '_Others') {
+              return intl.get('Others');
             } else {
               return intl.get(name) || name;
             }
@@ -411,7 +411,26 @@ export default class ChartComponent extends Component {
             return style;
           }
         }
-      });
+      };
+    };
+    // set legend
+    this.setLegend = function (legendName) {
+      let theme = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : CHART_THEME_COLOR['light'];
+      let legendPosition = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 'bottom';
+      if (!_this.chart) return;
+      const basicLegendConfig = _this.getLegendConfig(theme, legendPosition);
+      _this.chart.legend(legendName, basicLegendConfig);
+    };
+    // theta is pie or ring chart
+    this.setLegendForTheta = function (legendName) {
+      let theme = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : CHART_THEME_COLOR['light'];
+      let legendPosition = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 'bottom';
+      let offsetX = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 0;
+      if (!_this.chart) return;
+      const basicLegendConfig = _this.getLegendConfig(theme, legendPosition);
+      basicLegendConfig.offsetX = offsetX;
+      basicLegendConfig.itemName.style.fontSize = theme.fontSize;
+      _this.chart.legend(legendName, basicLegendConfig);
     };
     this.setColorMap = data => {
       let currentIdx = 0;
@@ -465,6 +484,7 @@ export default class ChartComponent extends Component {
             textOverflow: 'ellipsis'
           },
           'g2-tooltip-list-item': {
+            marginTop: '8px',
             marginBottom: '8px',
             display: 'flex'
           },
@@ -553,6 +573,13 @@ export default class ChartComponent extends Component {
         ...lineToolTipSettings
       });
     };
+    // theta is pie or ring chart
+    this.setToolTipForTheta = () => {
+      const settings = this.getToolTipSettings();
+      settings.showTitle = false;
+      settings.containerTpl = "<div class=\"g2-tooltip\">\n      <ul class=\"g2-tooltip-list\"></ul>\n    </div>";
+      this.chart.tooltip(settings);
+    };
     this.isShowXAxisLabel = chart => {
       return !!(chart && chart.config && chart.config.x_axis_show_label);
     };