sea-chart 0.0.23 → 0.0.24

package/dist/model/bar-stack.js

@@ -1,6 +1,6 @@
-import BaseModel from './base-model';
 import { isBoolean } from '../utils';
 import { CHART_TYPE, CHART_SUMMARY_TYPE } from '../constants';
+import BaseModel from './base-model';
 class BarStack extends BaseModel {
   constructor(options) {
     super({

package/dist/model/bar.js

@@ -1,6 +1,6 @@
-import BaseModel from './base-model';
 import { isBoolean } from '../utils';
 import { CHART_TYPE, CHART_SUMMARY_TYPE } from '../constants';
+import BaseModel from './base-model';
 class Bar extends BaseModel {
   constructor(options) {
     super({

package/dist/model/combination.js

@@ -1,6 +1,6 @@
-import BaseModel from './base-model';
 import { isBoolean } from '../utils';
 import { CHART_TYPE, CHART_SUMMARY_TYPE } from '../constants';
+import BaseModel from './base-model';
 class Combination extends BaseModel {
   constructor(options) {
     super({

package/dist/model/compare-bar.js

@@ -1,7 +1,7 @@
 import { isDateColumn, getTableById, getTableColumnByKey } from 'dtable-utils';
-import BaseModel from './base-model';
 import { isBoolean } from '../utils';
 import { CHART_TYPE } from '../constants';
+import BaseModel from './base-model';
 class CompareBar extends BaseModel {
   constructor(options, tables) {
     super({

package/dist/model/completeness.js

@@ -1,6 +1,6 @@
-import BaseModel from './base-model';
 import { isBoolean } from '../utils';
 import { CHART_TYPE } from '../constants';
+import BaseModel from './base-model';
 class Completeness extends BaseModel {
   constructor(options) {
     super({

package/dist/model/dashboard.js

@@ -1,5 +1,5 @@
-import BaseModel from './base-model';
 import { CHART_SUMMARY_TYPE, CHART_TYPE } from '../constants';
+import BaseModel from './base-model';
 class Dashboard extends BaseModel {
   constructor(options) {
     super({

package/dist/model/generic-model.js

@@ -1,7 +1,7 @@
 import { isNumber } from 'dtable-utils';
-import BaseModel from './base-model';
 import { isBoolean, getChartConfigValueByKey } from '../utils';
 import { DATE_GRANULATES, DEFAULT_LABEL_FONT_SIZE, GEOLOCATION_GRANULATES, LABEL_POSITION_TYPE, CHART_SUMMARY_TYPE, GENERIC_KEY, CHART_KEY, LEGEND_DIRECTION } from '../constants';
+import BaseModel from './base-model';
 export default class GenericModel extends BaseModel {
   constructor(object) {
     const options = object || {};

package/dist/model/heat-map.js

@@ -1,6 +1,6 @@
 import { isDateColumn, getTableById, getTableColumnByKey } from 'dtable-utils';
-import BaseModel from './base-model';
 import { CHART_TYPE } from '../constants';
+import BaseModel from './base-model';
 class HeatMap extends BaseModel {
   constructor(options, tables) {
     super({

package/dist/model/horizontal-bar.js

@@ -1,6 +1,6 @@
-import BaseModel from './base-model';
 import { isBoolean } from '../utils';
 import { CHART_TYPE, CHART_SUMMARY_TYPE } from '../constants';
+import BaseModel from './base-model';
 class HorizontalBar extends BaseModel {
   constructor(options) {
     super({

package/dist/model/index.js

@@ -1,7 +1,7 @@
+import { CHART_TYPE } from '../constants';
 import ChartModel from './chart';
 import User from './user';
 import GenericModel from './generic-model';
-import { CHART_TYPE } from '../constants';
 import Bar from './bar';
 import BarGroup from './bar-group';
 import BarStack from './bar-stack';

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

@@ -36,15 +36,13 @@ class NumericSummaryItem extends Component {
         setCurrentSelectedOptions,
         currentAxisesIndex
       } = this.props;
-      if (!currentSelectedOptions) {
-        currentSelectedOptions = [];
-      }
       let selectedColumnOption;
-      const availableOptions = numericColumnOptions.filter(option => {
+      const availableOptions = currentSelectedOptions && numericColumnOptions.filter(option => {
+        var _option$column;
         const index = currentSelectedOptions.findIndex(o => Object.values(o)[0] && Object.values(o)[0].key === option.column.key);
         //  find current option
         //  even index === -1 still return true case it's current selected option
-        if (option.column.key === value.column_key) {
+        if (((_option$column = option.column) === null || _option$column === void 0 ? void 0 : _option$column.key) === value.column_key) {
           //  "addCurrentSelectedOptions" is an async action in react, won't effect loops here
           if (index === -1) {
             addCurrentSelectedOptions(option.column, currentAxisesIndex);
@@ -88,13 +86,20 @@ class NumericSummaryItem extends Component {
       index,
       value,
       numericColumnOptions,
+      currentSelectedOptions,
       currentAxisesIndex
     } = this.props;
     const {
       column_key,
       summary_method
     } = value;
-    const [selectedColumnOption, availableOptions] = this.getAvailableOptions();
+    let selectedColumnOption, availableOptions;
+    if (currentSelectedOptions) {
+      [selectedColumnOption, availableOptions] = this.getAvailableOptions();
+    } else {
+      selectedColumnOption = numericColumnOptions.find(option => option.value.key === column_key);
+      availableOptions = numericColumnOptions;
+    }
     const selectedSummaryMethodOption = this.summaryMethodOptions.find(option => option.value === summary_method);
     const {
       isExpand

package/dist/utils/chart-utils/base-utils.js

@@ -75,7 +75,7 @@ BaseUtils.isValidExistChart = (tables, chart) => {
 
   // if current chart is using "groupby_column_key" as key
   // if groupby_column_key is null, still return false
-  let groupByColumnKey = config.groupby_column_key;
+  let groupByColumnKey = config.groupby_column_key || config.x_axis_column_key || config.vertical_axis_column_key || config.columnKey || config.date_column_key;
   if ([CHART_TYPE.BAR, CHART_TYPE.BAR_GROUP, CHART_TYPE.BAR_CUSTOM, CHART_TYPE.BAR_STACK, CHART_TYPE.LINE, CHART_TYPE.LINE_GROUP, CHART_TYPE.AREA, CHART_TYPE.AREA_GROUP].includes(config.type)) {
     groupByColumnKey = config.x_axis_column_key;
   }

package/dist/utils/column-utils.js

@@ -1,9 +1,9 @@
 import { CellType, DEFAULT_DATE_FORMAT, FORMULA_COLUMN_TYPES_MAP, FORMULA_RESULT_TYPE, isNumber, isNumericColumn, getNumberDisplayString } from 'dtable-utils';
+import { COLUMNS_ICON_CONFIG } from 'dtable-utils';
+import React from 'react';
+import { MIRROR_COLUMN_LIST, CHART_SUMMARY_TYPE } from '../constants';
 import { getClientFormulaDisplayString } from './cell-format-utils';
 import { ChartUtils } from './chart-utils';
-import { MIRROR_COLUMN_LIST, CHART_SUMMARY_TYPE } from '../constants';
-/* eslint-disable react/react-in-jsx-scope */
-import { COLUMNS_ICON_CONFIG } from 'dtable-utils';
 
 // get dtable column options
 export function getColumnOptions(columns) {

package/dist/view/wrapper/area.js

@@ -173,7 +173,7 @@ class Area extends ChartComponent {
         });
         this.chart.render();
       });
-      this.setToolTipForLine();
+      this.setToolTipForArea();
       isFunction(customRender) && customRender(this.chart);
       this.setNameLabelAndTooltip(theme, this.labelCount);
       this.setValueLabel(theme);

package/dist/view/wrapper/bar-custom.js

@@ -125,7 +125,7 @@ class BarCustom extends ChartComponent {
       let labelCfg = {
         style: {
           fontSize: BaseUtils.getLabelFontSize(label_font_size),
-          fill: themeColors.textColor
+          fill: themeColors.labelColor
         }
       };
       if (displayData) {

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

@@ -146,7 +146,7 @@ class BarGroup extends ChartComponent {
         },
         style: {
           fontSize: BaseUtils.getLabelFontSize(label_font_size),
-          fill: theme.textColor
+          fill: theme.labelColor
         },
         position: type === CHART_TYPE.BAR_STACK ? 'middle' : ''
       }).position('name*value').size(singleBarWidth).color(chartBarColor).tooltip('name*value*group_name*raw_name', (name, value, group_name, raw_name) => {

package/dist/view/wrapper/bar.js

@@ -80,7 +80,7 @@ class Bar extends ChartComponent {
       this.chart.interval().label(y_axis_show_value ? 'value' : false, {
         style: {
           fontSize: BaseUtils.getLabelFontSize(label_font_size),
-          fill: theme.textColor
+          fill: theme.labelColor
         }
       }).position('name*value').size(singleBarWidth).tooltip('name*value', (name, value) => {
         return {

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

@@ -416,6 +416,8 @@ export default class ChartComponent extends Component {
     this.getToolTipSettings = () => {
       return {
         showMarkers: false,
+        containerTpl: "<div class=\"g2-tooltip\">\n        <div class=\"g2-tooltip-title\">{title}</div>\n        <ul class=\"g2-tooltip-list\"></ul>\n      </div>",
+        itemTpl: "<li class=\"g2-tooltip-list-item\">\n         <span class=\"g2-tooltip-marker\" style=\"background-color:{color};display:inline-block;\"></span>\n         <span class=\"g2-tooltip-name\">{name}</span>\n         <span class=\"g2-tooltip-value\">{value}</span>\n      </li>",
         domStyles: {
           'g2-tooltip': {
             boxSizing: 'border-box',
@@ -432,7 +434,12 @@ export default class ChartComponent extends Component {
           'g2-tooltip-title': {
             color: '#333333',
             fontSize: '14px',
-            paddingBottom: '10px'
+            paddingBottom: '10px',
+            maxWidth: '160px',
+            whiteSpace: 'nowrap',
+            overflow: 'hidden',
+            lineHeight: '14px',
+            textOverflow: 'ellipsis'
           },
           'g2-tooltip-list-item': {
             marginBottom: '8px'
@@ -441,11 +448,16 @@ export default class ChartComponent extends Component {
             width: '12px',
             height: '12px',
             borderRadius: '2px',
-            marginBottom: '-1.5px',
             marginRight: '8px'
           },
           'g2-tooltip-name': {
-            fontSize: '12px'
+            display: 'inline-block',
+            fontSize: '12px',
+            maxWidth: '80px',
+            whiteSpace: 'nowrap',
+            overflow: 'hidden',
+            lineHeight: '12px',
+            textOverflow: 'ellipsis'
           },
           'g2-tooltip-value': {
             fontSize: '12px'
@@ -470,7 +482,29 @@ export default class ChartComponent extends Component {
         },
         crosshairs: {
           line: {
-            fill: '#e2e2e2'
+            fill: '#F3F3F3'
+          }
+        }
+      };
+      this.chart.tooltip({
+        ...settings,
+        ...lineToolTipSettings
+      });
+    };
+    this.setToolTipForArea = () => {
+      const settings = this.getToolTipSettings();
+      const lineToolTipSettings = {
+        showCrosshairs: true,
+        showTitle: true,
+        shared: true,
+        showMarkers: true,
+        marker: {
+          strokeOpacity: 0,
+          r: 6
+        },
+        crosshairs: {
+          line: {
+            fill: '#F3F3F3'
           }
         }
       };

package/dist/view/wrapper/completeness.js

@@ -123,7 +123,7 @@ export default function Completeness(props) {
         },
         style: {
           fontSize: BaseUtils.getLabelFontSize(label_font_size),
-          fill: theme.textColor
+          fill: theme.labelColor
         }
       }).position('name*value').size(singleBarWidth).color(colorField, colorFieldCb).adjust(adjustType).tooltip('name*group_name*value', (name, group_name, value) => {
         return {

package/dist/view/wrapper/horizontal-bar-group.js

@@ -93,7 +93,7 @@ class HorizontalBarGroup extends HorizontalComponent {
         },
         style: {
           fontSize: BaseUtils.getLabelFontSize(label_font_size),
-          fill: theme.textColor
+          fill: theme.labelColor
         }
       }).position('name*value').size(singleBarWidth).color(chartBarColor).tooltip('name*value*group_name*raw_name', (name, value, group_name, raw_name) => {
         return {

package/dist/view/wrapper/horizontal-bar.js

@@ -77,7 +77,7 @@ class HorizontalBar extends HorizontalComponent {
       this.chart.interval().label(display_data ? 'value' : false, {
         style: {
           fontSize: BaseUtils.getLabelFontSize(label_font_size),
-          fill: theme.textColor
+          fill: theme.labelColor
         }
       }).position('name*value')
       // .color(chartBarColor)

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

@@ -71,7 +71,7 @@ class LineGroup extends ChartComponent {
       const line = this.chart.line().label(y_axis_show_value ? 'value' : false, {
         style: {
           fontSize: BaseUtils.getLabelFontSize(label_font_size),
-          fill: theme.textColor
+          fill: theme.labelColor
         }
       }).animate({
         appear: {

package/dist/view/wrapper/mirror.js

@@ -2,10 +2,10 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
 import { getTableById, getTableColumnByKey, getNumberDisplayString } from 'dtable-utils';
-import ChartComponent from './chart-component';
 import intl from '../../intl';
 import { BaseUtils } from '../../utils';
 import { CHART_SUMMARY_TYPE, TITLE_AMOUNT, DEFAULT_NUMBER_FORMAT_OBJECT, CHART_SUMMARY_SHOW } from '../../constants';
+import ChartComponent from './chart-component';
 class Mirror extends ChartComponent {
   constructor(props) {
     super(props);
@@ -71,7 +71,7 @@ class Mirror extends ChartComponent {
         },
         label: {
           style: {
-            fill: themeColors.textColor
+            fill: themeColors.labelColor
           },
           formatter: name => {
             let label = name;

package/dist/view/wrapper/pie.js

@@ -2,8 +2,8 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { CHART_LABEL_POSITIONS, CHART_LABEL_FORMATS } from '../../constants';
 import { BaseUtils, isFunction } from '../../utils';
-import ChartComponent from './chart-component';
 import intl from '../../intl';
+import ChartComponent from './chart-component';
 class Pie extends ChartComponent {
   constructor(props) {
     super(props);
@@ -56,7 +56,7 @@ class Pie extends ChartComponent {
           custom: true,
           itemName: {
             style: {
-              fill: theme.textColor
+              fill: theme.labelColor
             }
           },
           items: newData.map((obj, index) => {

package/dist/view/wrapper/scatter.js

@@ -83,7 +83,7 @@ export function Scatter(props) {
       currentChart.chart.point().position('name*value').label(y_axis_show_value ? 'value' : false, {
         style: {
           fontSize: BaseUtils.getLabelFontSize(label_font_size),
-          fill: '#6e6e6e'
+          fill: theme.labelColor
         }
       }).color('groupby', groupby => {
         if (groupby[0] === 'groupby') {

package/package.json

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