sea-chart 2.0.54 → 2.0.56

package/dist/settings/widgets/basic-summary/index.css

@@ -1,10 +1,11 @@
 .sea-chart-settings .summary-type-explanation {
-  color: #9c9c9c;
+  color: var(--bs-icon-color);
   font-size: 12px;
 }
 
 .sea-chart-settings .chart-summary-types__option--is-selected .summary-type-explanation {
-  color: #9c9c9c !important;
+  color: var(--bs-icon-color) !important;
+  margin-top: 4px;
 }
 
 .sea-chart-settings .chart-summary-types__value-container .summary-type-explanation {

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

@@ -141,10 +141,7 @@ class NumericSummaryItem extends _react.Component {
       value: selectedColumnOption,
       placeholder: _intl.default.get('Select_a_column'),
       onChange: option => this.props.onColumnOptionChange(option, index, selectedColumnOption, currentAxisesIndex),
-      options: availableOptions,
-      style: {
-        color: '#6e7687'
-      }
+      options: availableOptions
     })), /*#__PURE__*/_react.default.createElement(_reactstrap.FormGroup, {
       className: "sea-chart-parameter-item summary-method"
     }, /*#__PURE__*/_react.default.createElement(_reactstrap.Label, null, _intl.default.get('Summary_method')), /*#__PURE__*/_react.default.createElement(_DTableSelect2.default, {

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.54",
+  "version": "2.0.56",
   "main": "./dist/index.js",
   "dependencies": {
     "@dnd-kit/core": "^6.1.0",
@@ -77,6 +77,7 @@
     "@babel/cli": "7.22.10",
     "@babel/core": "7.22.11",
     "@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",
@@ -102,7 +103,7 @@
     "dotenv": "6.2.0",
     "dotenv-expand": "5.1.0",
     "dtable-store": "~6.0.11",
-    "dtable-ui-component": "7.0.6",
+    "dtable-ui-component": "7.0.7",
     "ejs": "3.1.10",
     "eslint": "^6.8.0",
     "eslint-config-react-app": "^5.0.2",