sea-chart 2.0.42 → 2.0.44

package/dist/view/wrapper/ring.js

@@ -1,6 +1,5 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { debounce } from 'lodash-es';
 import * as d3 from 'd3';
 import { CHART_LABEL_POSITIONS, CHART_LABEL_FORMATS, CHART_THEME_COLOR, CHART_TYPE } from '../../constants';
 import { BaseUtils, isFunction } from '../../utils';
@@ -11,11 +10,6 @@ import ChartComponent from './chart-component';
 class Ring extends ChartComponent {
   constructor(props) {
     super(props);
-    this.handleResize = () => {
-      this.destroyChart();
-      this.createChart();
-      this.drawChart();
-    };
     this.createChart = () => {
       const {
         chart
@@ -69,14 +63,14 @@ class Ring extends ChartComponent {
       if (!Array.isArray(newData) || newData.length === 0) return;
 
       // Color
-      const colorDomain = new Set(data.map(d => d.name));
+      const colorDomain = new Set(newData.map(d => d.name));
       const colorRange = Array.from(colorDomain).map(name => colorMap[name === null || name === void 0 ? void 0 : name.trim()]);
       const color = d3.scaleOrdinal().domain(colorDomain).range(colorRange);
 
       // Ring and Arc
       const pie = d3.pie().sort(null).value(d => d.value);
-      const arcs = pie(data);
-      const arc = d3.arc().innerRadius(Math.min(chartWidth, chartHeight) / 2 * 0.7).outerRadius(Math.min(chartWidth, chartHeight) / 2 * 0.5);
+      const arcs = pie(newData);
+      const arc = d3.arc().innerRadius(Math.min(chartWidth, chartHeight) / 2 * 0.5).outerRadius(Math.min(chartWidth, chartHeight) / 2 * 0.7);
 
       // Draw Ring
       this.chart.append('g').attr('class', 'content-wrapper').selectAll().data(arcs).join('path').attr('stroke', 'white').attr('stroke-width', 2).attr('opacity', 1).attr('fill', d => color(d.data.name)).attr('d', arc).attr('data-groupName', d => d.data.name).call(g => {
@@ -133,13 +127,17 @@ class Ring extends ChartComponent {
         this.setAnnotationTotal(event.currentTarget.parentNode, {
           value: total
         });
+      }).call(g => {
+        this.animateArcGrowIn(g, arc);
+        this.animateFadeIn(this.chart.selectAll('text'), this.transitionDuration, this.transitionDuration * 0.5);
+        this.animateFadeIn(this.chart.selectAll('line'), this.transitionDuration, this.transitionDuration * 0.5);
       });
       if (show_legend) {
         this.setLegend({
           legendName: 'name',
           theme,
           legendPosition: 'center-right',
-          data,
+          data: newData,
           colorScale: color
         });
       }
@@ -275,8 +273,7 @@ class Ring extends ChartComponent {
   componentDidMount() {
     this.createChart();
     this.drawChart();
-    this.debouncedHandleResize = debounce(this.handleResize, 300);
-    window.addEventListener('resize', this.debouncedHandleResize);
+    super.componentDidMount();
   }
   componentDidUpdate(prevProps) {
     super.componentDidUpdate(prevProps);
@@ -288,7 +285,7 @@ class Ring extends ChartComponent {
   }
   componentWillUnmount() {
     this.destroyChart();
-    window.removeEventListener('resize', this.debouncedHandleResize);
+    super.componentWillUnmount();
   }
   render() {
     const {

package/dist/view/wrapper/scatter.js

@@ -1,8 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { cloneDeep, debounce } from 'lodash-es';
+import { cloneDeep } from 'lodash-es';
 import * as d3 from 'd3';
-import classNames from 'classnames';
 import { getTableById, getTableColumnByKey } from 'dtable-utils';
 import { CHART_THEME_COLOR } from '../../constants';
 import { BaseUtils, isFunction } from '../../utils';
@@ -12,11 +11,6 @@ import ChartComponent from './chart-component';
 class Scatter extends ChartComponent {
   constructor(props) {
     super(props);
-    this.handleResize = () => {
-      this.destroyChart();
-      this.createChart();
-      this.drawChart();
-    };
     this.createChart = () => {
       const {
         chart
@@ -28,8 +22,8 @@ class Scatter extends ChartComponent {
       } = chart.config;
       const initConfig = {
         insertPadding: 30,
-        marginLeft: y_axis_show_label ? 20 : 0,
-        marginBottom: x_axis_show_label ? 20 : 0,
+        marginLeft: y_axis_show_label ? this.getAxisTitleHeight(chart.config.y_axis_label_font_size) : 0,
+        marginBottom: x_axis_show_label ? this.getAxisTitleHeight(chart.config.x_axis_label_font_size) : 0,
         marginTop: y_axis_show_value ? 15 : 0,
         bottomLegendSpace: 0
       };
@@ -88,10 +82,10 @@ class Scatter extends ChartComponent {
         titleMarkColor: event.currentTarget.getAttribute('fill'),
         title: groupby || groupby === 0 ? groupby : intl.get('Empty'),
         items: [{
-          name: selectedXAxisColumn.name,
+          name: selectedXAxisColumn === null || selectedXAxisColumn === void 0 ? void 0 : selectedXAxisColumn.name,
           value: name
         }, {
-          name: selectedYAxisColumn.name,
+          name: selectedYAxisColumn === null || selectedYAxisColumn === void 0 ? void 0 : selectedYAxisColumn.name,
           value: value
         }]
       };
@@ -134,7 +128,7 @@ class Scatter extends ChartComponent {
       markLineWrapper.node() && markLineWrapper.node().remove();
       if (state === 'inActive') {
         // Remove stroke
-        d3.select(event.currentTarget).attr('stroke', '').attr('storke-width', '');
+        d3.select(event.currentTarget).attr('stroke', '').attr('stroke-width', '');
         return;
       }
       if (state === 'active') {
@@ -229,7 +223,7 @@ class Scatter extends ChartComponent {
         const {
           groupby
         } = d;
-        if (groupby && groupby[0] === 'groupby') {
+        if (!groupby) {
           return BaseUtils.getCurrentTheme(chartColorTheme).colors[0];
         }
         return colorMap[d.groupby];
@@ -258,6 +252,9 @@ class Scatter extends ChartComponent {
       }).on('mouseleave', (event, data) => {
         this.hiddenTooltip();
         this.handleAcitveAndInActiveState('inActive', event);
+      }).call(g => {
+        this.animateCircleZoomIn(g);
+        this.animateFadeIn(contentWrapper.selectAll('text'), this.transitionDuration, this.transitionDuration * 0.5);
       });
       this.setLegend({
         legendName: 'groupby',
@@ -278,8 +275,7 @@ class Scatter extends ChartComponent {
   componentDidMount() {
     this.createChart();
     this.drawChart();
-    this.debouncedHandleResize = debounce(this.handleResize, 300);
-    window.addEventListener('resize', this.debouncedHandleResize);
+    super.componentDidMount();
   }
   componentDidUpdate(prevProps) {
     super.componentDidUpdate(prevProps);
@@ -291,22 +287,16 @@ class Scatter extends ChartComponent {
   }
   componentWillUnmount() {
     this.destroyChart();
-    window.removeEventListener('resize', this.debouncedHandleResize);
+    super.componentWillUnmount();
   }
   render() {
-    const {
-      chart
-    } = this.props;
     const {
       tooltipData,
       toolTipPosition
     } = this.state;
     return /*#__PURE__*/React.createElement("div", {
       ref: ref => this.container = ref,
-      className: classNames('sea-chart-container', {
-        'show-x-axis-label': this.isShowXAxisLabel(chart),
-        'show-y-axis-label': this.isShowYAxisLabel(chart)
-      })
+      className: "sea-chart-container"
     }, /*#__PURE__*/React.createElement(ToolTip, {
       tooltipData: tooltipData,
       toolTipPosition: toolTipPosition,

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

@@ -1,7 +1,7 @@
 import React, { Fragment } from 'react';
 import shallowEqual from 'shallowequal';
 import dayjs from 'dayjs';
-import { CellType, COLLABORATOR_COLUMN_TYPES, FORMULA_RESULT_TYPE, getOption, getCollaborator, getNumberDisplayString, isNumber, isValidEmail, getCollaboratorsName } from 'dtable-utils';
+import { CellType, COLLABORATOR_COLUMN_TYPES, FORMULA_RESULT_TYPE, getOption, getCollaborator, getNumberDisplayString, isNumber, isValidEmail, getCollaboratorsName, isEmpty } from 'dtable-utils';
 import { getKnownCollaboratorByEmail, getColumnOptions, getDateColumnFormat, generateDefaultUser, getClientLinkDisplayString } from '../../../utils';
 import { Collaborator } from '../../../components';
 import intl from '../../../intl';
@@ -196,7 +196,7 @@ class PivotTableDisplayName extends React.Component {
             }
 
             // value is empty
-            if (validValue[0] === null || validValue[0] === undefined) {
+            if (isEmpty(validValue[0])) {
               return /*#__PURE__*/React.createElement("div", {
                 title: String(value),
                 "aria-label": String(value)

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

@@ -22,7 +22,7 @@ import _PhoneNumberLink from "dtable-ui-component/lib/PhoneNumberLink";
 import _TextFormatter from "dtable-ui-component/lib/TextFormatter";
 import _toaster from "dtable-ui-component/lib/toaster";
 import React, { Fragment } from 'react';
-import { CellType, checkIsDisplayAsPhoneNumberColumn } from 'dtable-utils';
+import { CellType, checkIsDisplayAsPhoneNumberColumn, isEmpty } from 'dtable-utils';
 import intl from '../../../../intl';
 import DtableFormulaFormatter from './formatters/formula-formatter';
 import LinkFormatter from './formatters/link-formatter';
@@ -151,7 +151,7 @@ class Formatter extends React.Component {
           }
         case CellType.NUMBER:
           {
-            if (!cellValue && cellValue !== 0) return this.renderEmptyFormatter();
+            if (isEmpty(cellValue)) return this.renderEmptyFormatter();
             return /*#__PURE__*/React.createElement(_NumberFormatter, {
               value: cellValue,
               data: column.data || {},

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

@@ -76,10 +76,16 @@ class RecordsBody extends Component {
     this.setState({
       endRenderIndex
     });
-    const resizeObserver = new ResizeObserver(() => {
+    this.resizeObserver = new ResizeObserver(() => {
       this.handleContainerResize();
     });
-    resizeObserver.observe(this.tableElementResultContentRef);
+    this.resizeObserver.observe(this.tableElementResultContentRef);
+  }
+  componentWillUnmount() {
+    if (this.resizeObserver) {
+      this.resizeObserver.disconnect();
+      this.resizeObserver = null;
+    }
   }
   render() {
     const {

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

@@ -126,13 +126,11 @@ class Records extends Component {
       this.resultRef.scrollLeft += deltaX;
     };
     this.state = {
-      scrollLeft: 0
-    };
-    this.resultContainerRef = null;
-    this.state = {
+      scrollLeft: 0,
       displayColumns: [],
       headerDisplayColumns: []
     };
+    this.resultContainerRef = null;
   }
   componentDidUpdate(prevProps) {
     if (prevProps.shownColumns !== this.props.shownColumns) {

package/dist/view/wrapper/treemap.js

@@ -1,8 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { debounce } from 'lodash-es';
 import * as d3 from 'd3';
-import classNames from 'classnames';
+import { isEmpty } from 'dtable-utils';
 import { EMPTY_NAME } from '../../constants';
 import { BaseUtils, isFunction } from '../../utils';
 import intl from '../../intl';
@@ -11,11 +10,6 @@ import ChartComponent from './chart-component';
 class Treemap extends ChartComponent {
   constructor(props) {
     super(props);
-    this.handleResize = () => {
-      this.destroyChart();
-      this.createChart();
-      this.drawChart();
-    };
     this.createChart = () => {
       const {
         chart
@@ -135,6 +129,9 @@ class Treemap extends ChartComponent {
         this.moveTooltip(event);
       }).on('mouseleave', event => {
         this.hiddenTooltip(event);
+      }).call(g => {
+        this.animateFadeIn(g);
+        this.animateFadeIn(contentWrapper.selectAll('text'), this.transitionDuration, this.transitionDuration * 0.5);
       });
     };
     this.getFullData = data => {
@@ -142,7 +139,7 @@ class Treemap extends ChartComponent {
         name: 'root',
         children: data.map(item => {
           let name = item.name;
-          item.name = name || name === 0 ? name : intl.get(EMPTY_NAME);
+          item.name = isEmpty(name) ? intl.get(EMPTY_NAME) : name;
           if (name === '_Others') {
             item.name = intl.get('Others');
           }
@@ -160,8 +157,7 @@ class Treemap extends ChartComponent {
   componentDidMount() {
     this.createChart();
     this.drawChart();
-    this.debouncedHandleResize = debounce(this.handleResize, 300);
-    window.addEventListener('resize', this.debouncedHandleResize);
+    super.componentDidMount();
   }
   componentDidUpdate(prevProps) {
     super.componentDidUpdate(prevProps);
@@ -173,22 +169,16 @@ class Treemap extends ChartComponent {
   }
   componentWillUnmount() {
     this.destroyChart();
-    window.removeEventListener('resize', this.debouncedHandleResize);
+    super.componentWillUnmount();
   }
   render() {
-    const {
-      chart
-    } = this.props;
     const {
       tooltipData,
       toolTipPosition
     } = this.state;
     return /*#__PURE__*/React.createElement("div", {
       ref: ref => this.container = ref,
-      className: classNames('sea-chart-container', {
-        'show-x-axis-label': this.isShowXAxisLabel(chart),
-        'show-y-axis-label': this.isShowYAxisLabel(chart)
-      })
+      className: "sea-chart-container"
     }, /*#__PURE__*/React.createElement(ToolTip, {
       tooltipData: tooltipData,
       toolTipPosition: toolTipPosition,

package/dist/view/wrapper/trend.js

@@ -1,5 +1,6 @@
 import React, { Component } from 'react';
-import classNames from 'classnames';
+import classNames from "classnames";
+import { isEmpty } from 'dtable-utils';
 import { BaseUtils } from '../../utils';
 import intl from '../../intl';
 import { BASIC_NUMBER_CARD_CALCULATION_METHOD, EMPTY_NAME, CHART_SUMMARY_TYPE, CHART_THEME_COLOR, TREND_TYPES } from '../../constants';
@@ -25,7 +26,7 @@ class Trend extends Component {
       }
     };
     this.formatData = data => {
-      if (!data && data !== 0) return intl.get(EMPTY_NAME);
+      if (isEmpty(data)) return intl.get(EMPTY_NAME);
       const {
         chart,
         summaryColumn

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sea-chart",
-  "version": "2.0.42",
+  "version": "2.0.44",
   "main": "./dist/index.js",
   "dependencies": {
     "@dnd-kit/core": "^6.1.0",
@@ -25,7 +25,7 @@
   "peerDependencies": {
     "@antv/scale": "0.3.14",
     "d3-composite-projections": "~1.4.*",
-    "dtable-ui-component": "~6.0.*",
+    "dtable-ui-component": "~7.0.*",
     "dtable-utils": "~5.0.*",
     "prop-types": "15.8.1",
     "react": "^18.3.1",