sea-chart 2.0.55 → 2.0.57

package/dist/view/index.css

@@ -16,6 +16,12 @@
   color: #666666;
 }
 
+.sea-chart-formatter .sea-chart-empty-result {
+  flex: 1;
+  min-height: 0;
+  color: #666666;
+}
+
 .sea-chart-formatter .sea-chart-formatter-container {
   height: 100%;
   width: 100%;

package/dist/view/index.js

@@ -20,6 +20,7 @@ var _concurrencyManager = _interopRequireDefault(require("../utils/concurrency-m
 var _wrapper = _interopRequireDefault(require("./wrapper"));
 var _title = _interopRequireDefault(require("./title"));
 require("./index.css");
+const NO_STATISTIC_RESULTS = 'There_are_no_statistic_results_yet';
 class View extends _react.default.PureComponent {
   constructor(props) {
     var _this;
@@ -67,7 +68,7 @@ class View extends _react.default.PureComponent {
       if (!data) {
         this.setState({
           errorMessage: '',
-          tipMessage: 'There_are_no_statistic_results_yet',
+          tipMessage: NO_STATISTIC_RESULTS,
           data: null,
           isCalculated: true
         });
@@ -295,16 +296,12 @@ class View extends _react.default.PureComponent {
         className: (0, _classnames.default)('error', validClassName, tipBackgroundColorClassName)
       }, /*#__PURE__*/_react.default.createElement("span", null, errorMessage));
     }
-    if (tipMessage) {
+    if (tipMessage && tipMessage !== NO_STATISTIC_RESULTS) {
       return /*#__PURE__*/_react.default.createElement("div", {
         className: (0, _classnames.default)('error', validClassName, tipBackgroundColorClassName)
       }, /*#__PURE__*/_react.default.createElement("span", null, _intl.default.get(tipMessage)));
     }
-    if (_chartUtils.BaseUtils.imEmptyChartResult(data) && !chartType.includes('map')) {
-      return /*#__PURE__*/_react.default.createElement("div", {
-        className: (0, _classnames.default)('error', validClassName, tipBackgroundColorClassName)
-      }, /*#__PURE__*/_react.default.createElement("span", null, _intl.default.get('There_are_no_statistic_results_yet')));
-    }
+    const isEmptyResult = tipMessage === NO_STATISTIC_RESULTS || _chartUtils.BaseUtils.imEmptyChartResult(data) && !chartType.includes('map');
     return /*#__PURE__*/_react.default.createElement("div", {
       className: validClassName
     }, /*#__PURE__*/_react.default.createElement("div", {
@@ -313,7 +310,9 @@ class View extends _react.default.PureComponent {
       })
     }, !hideTitle && /*#__PURE__*/_react.default.createElement(_title.default, {
       chart: chart
-    }), /*#__PURE__*/_react.default.createElement("div", {
+    }), isEmptyResult ? /*#__PURE__*/_react.default.createElement("div", {
+      className: (0, _classnames.default)('sea-chart-empty-result', tipBackgroundColorClassName)
+    }, /*#__PURE__*/_react.default.createElement("span", null, _intl.default.get(NO_STATISTIC_RESULTS))) : /*#__PURE__*/_react.default.createElement("div", {
       id: `sea-chart-cavans-container-${chart.id}`,
       className: (0, _classnames.default)('sea-chart-cavans-container')
     }, /*#__PURE__*/_react.default.createElement(_wrapper.default, {

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

@@ -565,6 +565,26 @@ class ChartComponent extends _react.Component {
         return _intl.default.get(name) || name;
       }
     };
+    this.truncateLegendText = (textNode, maxWidth) => {
+      if (!textNode || !Number.isFinite(maxWidth) || maxWidth <= 0) return false;
+      const fullText = textNode.textContent || '';
+      const getTextWidth = () => {
+        if (typeof textNode.getComputedTextLength === 'function') {
+          return textNode.getComputedTextLength();
+        }
+        return textNode.getBoundingClientRect().width;
+      };
+      if (!fullText || getTextWidth() <= maxWidth) return false;
+      const ellipsis = '...';
+      let textLength = fullText.length;
+      while (textLength > 0) {
+        textNode.textContent = `${fullText.slice(0, textLength)}${ellipsis}`;
+        if (getTextWidth() <= maxWidth) return true;
+        textLength--;
+      }
+      textNode.textContent = ellipsis;
+      return true;
+    };
     this.setLegend = _ref => {
       var _chart$config, _chart$config2;
       let {
@@ -756,11 +776,6 @@ class ChartComponent extends _react.Component {
         let [groupName] = _ref5;
         return groupName;
       }).call(g => {
-        // Add text
-        g.nodes().forEach(rect => {
-          const parentNode = rect.parentNode;
-          d3.select(parentNode).append('text').attr('x', legendRectWidth + legendRecTextGap).attr('fill', theme.legendTextColor).attr('font-size', theme.legendFontSize).text(this.formatterLegendName(rect.dataset.text)).attr('data-text', rect.dataset.text).attr('y', legendItemTextPaddingTop);
-        });
         const legendItems = Array.from(legendWrapper.node().children).filter(item => item.getAttribute('class') !== 'legend-flip-page');
         const {
           start,
@@ -768,6 +783,18 @@ class ChartComponent extends _react.Component {
           top,
           bottom
         } = this.getLegendBoundary(legendPosition);
+        const legendTranslateX = legendPosition === 'center-right' ? start - 50 : start;
+        const maxLegendTextWidth = legendPosition === 'center-right' ? end - legendTranslateX - legendRectWidth - legendRecTextGap : null;
+
+        // Add text
+        g.nodes().forEach(rect => {
+          const parentNode = rect.parentNode;
+          const label = this.formatterLegendName(rect.dataset.text);
+          const textNode = d3.select(parentNode).append('text').attr('x', legendRectWidth + legendRecTextGap).attr('fill', theme.legendTextColor).attr('font-size', theme.legendFontSize).text(label).attr('data-text', rect.dataset.text).attr('y', legendItemTextPaddingTop).node();
+          if (this.truncateLegendText(textNode, maxLegendTextWidth)) {
+            d3.select(textNode).append('title').text(label);
+          }
+        });
         if (top && bottom) {
           // update g translateY
           legendItems.forEach((item, index) => {
@@ -780,7 +807,8 @@ class ChartComponent extends _react.Component {
               const prevTranslateY = Number(prevItem.getAttribute('data-translateY'));
               translateY = prevTranslateY + height + legendItemMargin;
             }
-            d3.select(item).attr('transform', `translate(${start},${translateY})`).attr('data-translateY', translateY);
+            const translateX = legendPosition === 'center-right' ? start - 50 : start;
+            d3.select(item).attr('transform', `translate(${translateX},${translateY})`).attr('data-translateY', translateY);
             this.bindLegendItemInteraction(item);
           });
         } else {
@@ -798,7 +826,7 @@ class ChartComponent extends _react.Component {
             d3.select(item).attr('transform', `translate(${translateX},0)`).attr('data-translateX', translateX);
             this.bindLegendItemInteraction(item);
 
-            // legend items add offset 
+            // legend items add offset
             if (legendPosition === 'top-right') {
               d3.select(item).attr('opacity', 0);
               // Execute only once
@@ -1588,7 +1616,7 @@ class ChartComponent extends _react.Component {
             allTicks.forEach(tick => {
               const opacityVal = tick.getAttribute('opacity');
               if (Number(opacityVal) !== 0) {
-                // roate 
+                // roate
                 d3.select(tick).select('text').attr('transform', 'rotate(30)').style('text-anchor', 'end').attr('dy', '1em').attr('dx', '-0.5em');
               }
             });
@@ -1622,7 +1650,7 @@ class ChartComponent extends _react.Component {
             allTicks.forEach(tick => {
               const opacityVal = tick.getAttribute('opacity');
               if (Number(opacityVal) !== 0) {
-                // roate 
+                // roate
                 d3.select(tick).select('text').attr('transform', 'rotate(45)').style('text-anchor', 'start').attr('dy', '0.4em').attr('dx', '0.4em');
               }
             });

package/dist/view/wrapper/treemap.js

@@ -55,7 +55,7 @@ class Treemap extends _chartComponent.default {
         offsetY
       } = event;
       const newTooltipData = {
-        title: data.name,
+        title: this.getDisplayName(data.name),
         items: [{
           color: '',
           name: _intl.default.get('Amount'),
@@ -120,7 +120,7 @@ class Treemap extends _chartComponent.default {
             width,
             height
           } = group.getBoundingClientRect();
-          d3.select(group.parentNode).append('text').attr('stroke', '#fff').attr('stroke-width', 0.5).attr('paint-order', 'stroke').attr('fill', '#fff').text(name).call(t => {
+          d3.select(group.parentNode).append('text').attr('stroke', '#fff').attr('stroke-width', 0.5).attr('paint-order', 'stroke').attr('fill', '#fff').text(this.getDisplayName(name)).call(t => {
             const {
               width: tWidth,
               height: tHeight
@@ -143,18 +143,16 @@ class Treemap extends _chartComponent.default {
       });
     };
     this.getFullData = data => {
-      const fullData = {
+      return {
         name: 'root',
-        children: data.map(item => {
-          let name = item.name;
-          item.name = (0, _dtableUtils.isEmpty)(name) ? _intl.default.get(_constants.EMPTY_NAME) : name;
-          if (name === '_Others') {
-            item.name = _intl.default.get('Others');
-          }
-          return item;
-        })
+        children: data.map(item => ({
+          ...item
+        }))
       };
-      return fullData;
+    };
+    this.getDisplayName = name => {
+      if (name === '_Others') return _intl.default.get('Others');
+      return (0, _dtableUtils.isEmpty)(name) ? _intl.default.get(_constants.EMPTY_NAME) : name;
     };
     this.chart = null;
     this.state = {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sea-chart",
-  "version": "2.0.55",
+  "version": "2.0.57",
   "main": "./dist/index.js",
   "dependencies": {
     "@dnd-kit/core": "^6.1.0",
@@ -9,7 +9,7 @@
     "@dnd-kit/utilities": "^3.2.2",
     "@seafile/seafile-calendar": "^1.0.8",
     "@seafile/seafile-editor": "^3.0.26",
-    "axios": "~1.16.*",
+    "axios": "^1.19.0",
     "classnames": "^2.3.2",
     "d3": "~7.9.0",
     "dayjs": "1.10.7",
@@ -36,12 +36,11 @@
     "start.bak": "node scripts/start.js",
     "build": "node scripts/build.js",
     "pub:dist": "cross-env BABEL_ENV=production ./node_modules/.bin/babel src --out-dir dist --copy-files",
-    "eslint": "eslint --ext .jsx,.js src --max-warnings=0",
+    "eslint": "cross-env BABEL_ENV=development NODE_ENV=development eslint --ext .jsx,.js src --max-warnings=0",
     "lint": "lint-staged",
     "pub:optimized": "rimraf dist/config.js",
     "prepare": "husky install",
     "prepublishOnly": "npm run clean && npm run pub:dist",
-    "release": "release-it",
     "start": "cross-env NODE_ENV=development LOG_ENV=rc NODE_OPTIONS=--openssl-legacy-provider node dev-server.js",
     "translate": "node scripts/translate.js",
     "push-translate": "tx push -s",
@@ -75,17 +74,18 @@
   },
   "devDependencies": {
     "@babel/cli": "7.22.10",
-    "@babel/core": "7.22.11",
+    "@babel/core": "7.29.7",
+    "@babel/eslint-parser": "7.25.9",
     "@babel/plugin-proposal-object-rest-spread": "^7.9.6",
+    "@babel/plugin-proposal-private-property-in-object": "7.21.11",
     "@babel/plugin-transform-runtime": "^7.23.9",
     "@babel/preset-env": "7.22.14",
     "@babel/runtime": "^7.10.2",
     "@gatsbyjs/reach-router": "^1.3.9",
     "@svgr/webpack": "6.5.1",
     "@types/jest": "29.0.0",
-    "@typescript-eslint/eslint-plugin": "^2.2.0",
-    "@typescript-eslint/parser": "^2.2.0",
-    "babel-eslint": "10.0.3",
+    "@typescript-eslint/eslint-plugin": "5.62.0",
+    "@typescript-eslint/parser": "5.62.0",
     "babel-jest": "26.6.3",
     "babel-loader": "8.0.6",
     "babel-plugin-import": "^1.13.8",
@@ -98,19 +98,19 @@
     "core-js": "^3.35.1",
     "cross-env": "^7.0.3",
     "css-loader": "^6.5.1",
-    "css-minimizer-webpack-plugin": "5.0.1",
+    "css-minimizer-webpack-plugin": "8.0.0",
     "dotenv": "6.2.0",
     "dotenv-expand": "5.1.0",
     "dtable-store": "~6.0.11",
     "dtable-ui-component": "7.0.7",
     "ejs": "3.1.10",
-    "eslint": "^6.8.0",
-    "eslint-config-react-app": "^5.0.2",
-    "eslint-loader": "4.0.2",
-    "eslint-plugin-flowtype": "3.13.0",
-    "eslint-plugin-import": "^2.18.2",
-    "eslint-plugin-jsx-a11y": "6.2.3",
-    "eslint-plugin-react": "~7.37.4",
+    "eslint": "8.57.1",
+    "eslint-config-react-app": "7.0.1",
+    "eslint-plugin-flowtype": "8.0.3",
+    "eslint-plugin-import": "2.32.0",
+    "eslint-plugin-jsx-a11y": "6.10.2",
+    "eslint-plugin-react": "7.37.5",
+    "eslint-webpack-plugin": "4.2.0",
     "file-loader": "6.2.0",
     "fs-extra": "^10.1.0",
     "html-webpack-plugin": "^5.6.0",
@@ -118,7 +118,7 @@
     "identity-obj-proxy": "3.0.0",
     "is-wsl": "^1.1.0",
     "jest": "26.6.3",
-    "koa": "2.16.1",
+    "koa": "2.16.4",
     "koa-router": "7.3.0",
     "koa-send": "5.0.1",
     "koa2-cors": "2.0.6",
@@ -128,7 +128,7 @@
     "nodemon": "^3.1.0",
     "object-assign": "4.1.1",
     "pnp-webpack-plugin": "1.5.0",
-    "postcss": "8.4.31",
+    "postcss": "8.5.26",
     "postcss-flexbugs-fixes": "^5.0.2",
     "postcss-loader": "^6.2.1",
     "postcss-normalize": "^10.0.1",
@@ -137,33 +137,31 @@
     "raf": "3.4.0",
     "react": "~18.3.1",
     "react-app-polyfill": "~3.0.0",
-    "react-cookies": "0.1.1",
     "react-dev-utils": "^12.0.1",
     "react-dom": "~18.3.1",
     "react-i18next": "12.1.4",
     "regenerator-runtime": "^0.14.1",
-    "release-it": "16.2.1",
     "resolve": "1.12.0",
     "resolve-url-loader": "5.0.0",
     "rimraf": "^5.0.7",
     "sass-loader": "13.3.2",
     "style-loader": "^1.0.1",
     "svgo-loader": "^3.0.0",
-    "terser-webpack-plugin": "4.2.3",
+    "terser-webpack-plugin": "5.6.1",
     "ts-pnp": "1.1.4",
     "url-loader": "4.1.1",
-    "webpack": "5.88.2",
-    "webpack-dev-server": "5.2.0",
+    "webpack": "5.91.0",
+    "webpack-dev-server": "5.2.6",
     "webpack-manifest-plugin": "5.0.0",
     "webpack-merge": "5.8.0",
-    "workbox-webpack-plugin": "7.0.0"
+    "workbox-webpack-plugin": "7.4.1"
   },
   "publishConfig": {
     "access": "public"
   },
-  "release-it": {
-    "npm": {
-      "tag": "next"
+  "overrides": {
+    "slugid": {
+      "uuid": "11.1.1"
     }
   }
 }