sea-chart 2.0.7 → 2.0.9

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

@@ -48,14 +48,31 @@ class ChartComponent extends _react.Component {
       const column = this.getColumn(tables, tableId, columnKey);
       return column.name || '';
     };
-    this.initChart = container => {
+    this.initChart = function (container, id) {
+      let initConfig = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
       const {
         width,
         height
       } = container.getBoundingClientRect();
-      this.chart = d3.create('svg').attr('width', width).attr('height', height).attr('viewBox', [0, 0, width, height]);
-      this.container.appendChild(this.chart.node());
-      this.chartBoundingClientRect = this.chart.node().getBoundingClientRect();
+      _this.chart = d3.create('svg').attr('id', id).attr('class', "svg-wrapper-".concat(id)).attr('width', width).attr('height', height).attr('viewBox', [0, 0, width, height]);
+      _this.container.appendChild(_this.chart.node());
+      _this.chartBoundingClientRect = {
+        ...JSON.parse(JSON.stringify(_this.chart.node().getBoundingClientRect())),
+        ...initConfig
+      };
+    };
+    this.initDefs = () => {
+      if (this.container) {
+        // add Mask
+        const {
+          previewType
+        } = this.props.canvasStyle || {};
+        const {
+          width,
+          height
+        } = this.container.getBoundingClientRect();
+        this.chart.append('defs').append('mask').attr('id', "mask-wrapper-".concat(previewType, "-").concat(this.chart.node().id)).append('rect').attr('x', 0).attr('y', 0).attr('width', width).attr('height', height - 30).attr('fill', 'white');
+      }
     };
     this.getChartDisplayLabels = (containerWidth, minItemWidth, charts) => {
       let labels = [];
@@ -198,7 +215,7 @@ class ChartComponent extends _react.Component {
         });
       }
     };
-    this.renderAxisLabel = (chart, tables, container) => {
+    this.renderAxisLabel = (chart, tables, chartContainer) => {
       var _this$chart2;
       if (!this.chart || !chart) return;
       let {
@@ -226,7 +243,6 @@ class ChartComponent extends _react.Component {
       let textColor;
       this.globalTheme === _constants.THEME_NAME_MAP.DARK ? textColor = '#fff' : textColor = '#999';
       const xAxisID = "chart-x-axis-label_".concat(chart.id);
-      const chartContainer = container || this.chart.getCanvas().get('container');
       const xLabel = chartContainer === null || chartContainer === void 0 ? void 0 : chartContainer.querySelector("#".concat(xAxisID));
       if (!xLabel && x_axis_show_label) {
         const div = document.createElement('div');
@@ -456,13 +472,101 @@ class ChartComponent extends _react.Component {
         }
       };
     };
+    this.formatterLegendName = name => {
+      if (!name && typeof name !== 'number' || name.trim() === 'undefined' || name.trim() === 'null') {
+        return _intl.default.get(_constants.EMPTY_NAME);
+      } else if (name === '_Others') {
+        return _intl.default.get('Others');
+      } else {
+        return _intl.default.get(name) || name;
+      }
+    };
+    this.getOthersLegendItemWidth = (curIndex, allLegendItems, direction) => {
+      let width = 0;
+      let otherItems = [];
+      if (direction === 1) {
+        otherItems = allLegendItems.slice(0, curIndex);
+      }
+      if (direction === -1) {
+        otherItems = allLegendItems.slice(curIndex);
+      }
+      otherItems.forEach(item => {
+        const {
+          width: legendItemWidth
+        } = item.getBoundingClientRect();
+        width = width + legendItemWidth;
+      });
+      return width;
+    };
     // set legend
     this.setLegend = function (legendName) {
+      var _this$chart$node;
       let theme = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : _constants.CHART_THEME_COLOR['light'];
-      let legendPosition = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 'bottom';
+      let legendPosition = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 'top-left';
+      let data = arguments.length > 3 ? arguments[3] : undefined;
+      let colorScale = arguments.length > 4 ? arguments[4] : undefined;
       if (!_this.chart) return;
-      const basicLegendConfig = _this.getLegendConfig(theme, legendPosition);
-      _this.chart.legend(legendName, basicLegendConfig);
+      const {
+        width: chartWidth,
+        insertPadding
+      } = _this.chartBoundingClientRect;
+      const legendItemPaddingTop = 8;
+      const legendItemSpacing = 30;
+      const legendRectWidth = 18;
+      const legendRectHeight = 6;
+      const r = 3;
+      let translateX = 0;
+      let legendData = [];
+      let direction = 0; // 1 means left, -1 means right
+      if (legendPosition === 'top-left') {
+        translateX = insertPadding;
+        legendData = d3.group(data, d => d[legendName]);
+        direction = 1;
+      }
+      if (legendPosition === 'top-right') {
+        translateX = chartWidth;
+        legendData = d3.group(data, d => d[legendName]);
+        direction = -1;
+      }
+      const legendWrapper = _this.chart.append('g').attr('class', "legend-wrapper-".concat((_this$chart$node = _this.chart.node()) === null || _this$chart$node === void 0 ? void 0 : _this$chart$node.id)).attr('transform', "translate(".concat(translateX, ", 0)"));
+      legendWrapper.selectAll().data(legendData).join('g').append('rect').attr('width', legendRectWidth).attr('height', legendRectHeight).attr('rx', r).attr('fill', _ref => {
+        let [groupName] = _ref;
+        if (colorScale) return colorScale(groupName);
+        return _this.colorMap[groupName] || _constants.CHART_STYLE_COLORS[0];
+      }).attr('data-text', _ref2 => {
+        let [groupName] = _ref2;
+        return groupName;
+      }).call(g => {
+        const legendItems = Array.from(legendWrapper.node().children);
+        const legendItemCount = legendItems.length;
+
+        // Add text
+        g.nodes().forEach(rect => {
+          const parentNode = rect.parentNode;
+          let textHeight = 0;
+          let textWidth = 0;
+          d3.select(parentNode).append('text').attr('x', legendRectWidth).attr('width', 30).attr('fill', theme.legendTextColor).attr('font-size', theme.legendFontSize).text(_this.formatterLegendName(rect.dataset.text)).attr('data-text', rect.dataset.text).call(g => {
+            // set text y position
+            const {
+              height,
+              width
+            } = g.node().getBoundingClientRect();
+            textHeight = height;
+            textWidth = width;
+            g.attr('y', textHeight / 2);
+          });
+        });
+
+        // set g position
+        legendItems.forEach((item, index) => {
+          const otherslegendItemWidth = _this.getOthersLegendItemWidth(index, legendItems, direction);
+          d3.select(item).attr('transform', () => {
+            const gaps = direction === 1 ? index : legendItemCount - index;
+            const translateX = direction * (otherslegendItemWidth + gaps * legendItemSpacing);
+            return "translate(".concat(translateX, ", ").concat(legendItemPaddingTop, ")");
+          });
+        });
+      });
     };
     // theta is pie or ring chart
     this.setLegendForTheta = function (legendName) {
@@ -586,47 +690,6 @@ class ChartComponent extends _react.Component {
       const settings = this.getToolTipSettings(isGroup, summaryColumn, y_axis_summary_method, useSingleSelectColumnColor);
       this.chart.tooltip(settings);
     };
-    this.getToolTipContainer = (tooltipData, position) => {
-      const {
-        offsetX,
-        offsetY
-      } = position || {
-        offsetX: -9999,
-        offsetY: -9999
-      };
-      const {
-        title,
-        items
-      } = tooltipData || {
-        title: '',
-        items: []
-      };
-      const dom = /*#__PURE__*/_react.default.createElement("div", {
-        className: "sea-chart-d3-tooltip-container",
-        style: {
-          transform: "translate(".concat(offsetX + 50, "px, ").concat(offsetY, "px)")
-        }
-      }, /*#__PURE__*/_react.default.createElement("div", {
-        className: "sea-chart-d3-tooltip-title"
-      }, title), /*#__PURE__*/_react.default.createElement("ul", {
-        className: "sea-chart-d3-tooltip-list"
-      }, items.map((item, index) => {
-        return /*#__PURE__*/_react.default.createElement("li", {
-          className: "sea-chart-d3-tooltip-list-item",
-          key: index
-        }, /*#__PURE__*/_react.default.createElement("span", {
-          className: "sea-chart-d3-tooltip-marker",
-          style: {
-            backgroundColor: item.color
-          }
-        }), /*#__PURE__*/_react.default.createElement("span", {
-          className: "sea-chart-d3-tooltip-name"
-        }, item.name), /*#__PURE__*/_react.default.createElement("span", {
-          className: "sea-chart-d3-tooltip-value"
-        }, item.value));
-      })));
-      return dom;
-    };
     this.setToolTipForLine = () => {
       const settings = this.getToolTipSettings();
       const lineToolTipSettings = {
@@ -693,30 +756,81 @@ class ChartComponent extends _react.Component {
       }
       return themeColors || _constants.CHART_THEME_COLOR[_constants.THEME_NAME_MAP.LIGHT];
     };
-    this.setDispalyGoalLine = (goalLabel, goalValue, chartWidth) => {
-      this.chart.annotation().line({
-        // start of the annotation line start
-        // x start is -0.5
-        start: [-0.5, goalValue],
-        // x end is infinite
-        end: [99999, goalValue],
-        style: {
-          stroke: '#aaa',
-          // dash color
-          lineDash: [8, 3] //  dash style
-        },
-        text: {
-          content: goalLabel,
-          offsetX: chartWidth - 70,
-          offsetY: -5,
-          style: {
-            fill: '#666'
-          }
+    this.setDispalyGoalLine = (goal_label, goal_value, insertPadding, yScale) => {
+      var _this$chart$node2;
+      const {
+        width: chartWidth
+      } = this.chartBoundingClientRect;
+      const annotationWrapper = this.chart.append('g').attr('class', "annotation-wrapper-".concat((_this$chart$node2 = this.chart.node()) === null || _this$chart$node2 === void 0 ? void 0 : _this$chart$node2.id));
+      annotationWrapper.append('line').attr('stroke', '#aaa').attr('x1', insertPadding).attr('y1', yScale(goal_value)).attr('x2', chartWidth - insertPadding).attr('y2', yScale(goal_value)).call(g => {
+        annotationWrapper.append('text').attr('x', chartWidth - insertPadding - 30).attr('y', yScale(goal_value) - 10).attr('fill', '#666').text(goal_label);
+      });
+    };
+    this.addLabelToRectTop = _ref3 => {
+      let {
+        container,
+        x,
+        y,
+        xWidth,
+        theme,
+        label_font_size,
+        text
+      } = _ref3;
+      d3.select(container).append('text').attr('y', Number(y) - 10).attr('fill', theme.labelColor).attr('font-size', _utils.BaseUtils.getLabelFontSize(label_font_size)).text(text).call(g => {
+        const {
+          width
+        } = g.node().getBoundingClientRect();
+        g.attr('x', Number(x) + Number(xWidth) / 2 - width / 2);
+      });
+    };
+    this.addLabelToRectCenter = _ref4 => {
+      let {
+        chartType,
+        container,
+        x,
+        y,
+        xWidth,
+        yheight,
+        overflowHeight,
+        theme,
+        label_font_size,
+        text
+      } = _ref4;
+      d3.select(container).append('text').attr('fill', theme.labelColor).attr('font-size', _utils.BaseUtils.getLabelFontSize(label_font_size)).text(text).call(g => {
+        const {
+          width,
+          height
+        } = g.node().getBoundingClientRect();
+        const translateX = Number(x) + xWidth / 2 - width / 2;
+        let translateY = Number(y) + Number(yheight / 2) + height / 2;
+        if (chartType === _constants.CHART_TYPE.BAR_STACK) {
+          translateY = translateY - overflowHeight / 2;
         }
+        g.attr('transform', "translate(".concat(translateX, ", ").concat(translateY, ")"));
       });
     };
+    this.setActiveAndInActiveState = (state, allGroup, curGroupName) => {
+      if (state === 'active') {
+        allGroup.forEach(g => {
+          const rects = Array.from(g.children);
+          rects.forEach(item => {
+            d3.select(item).attr('opacity', 1);
+          });
+        });
+      }
+      if (state === 'inActive') {
+        allGroup.forEach(g => {
+          const rects = Array.from(g.children);
+          rects.forEach(item => {
+            if (item.getAttribute('data-groupName') !== curGroupName) {
+              d3.select(item).attr('opacity', 0.3);
+            }
+          });
+        });
+      }
+    };
     this.initLabelStroke(props === null || props === void 0 ? void 0 : props.globalTheme);
-    this.chartBoundingClientRect = null;
+    this.chartBoundingClientRect = {};
   }
   componentDidUpdate(prevProps) {
     if (prevProps.globalTheme !== this.props.globalTheme) {

package/dist/view/wrapper/index.js

@@ -11,6 +11,10 @@ var _constants = require("../../constants");
 var _statisticRecordDialog = _interopRequireDefault(require("../../components/statistic-record-dialog"));
 var _table = _interopRequireDefault(require("./table"));
 var _bar = _interopRequireDefault(require("./bar"));
+var _barGroup = _interopRequireDefault(require("./bar-group"));
+var _barStack = _interopRequireDefault(require("./bar-stack"));
+var _barCompare = _interopRequireDefault(require("./bar-compare"));
+var _barCustomStack = _interopRequireDefault(require("./bar-custom-stack"));
 var _basicNumberCard = _interopRequireDefault(require("./basic-number-card"));
 var _trend = _interopRequireDefault(require("./trend"));
 var _tableElement = _interopRequireDefault(require("./table-element"));
@@ -94,6 +98,37 @@ const Wrapper = _ref => {
             canvasStyle: canvasStyle
           }));
         }
+      case _constants.CHART_TYPE.BAR_GROUP:
+        {
+          return /*#__PURE__*/_react.default.createElement(_barGroup.default, Object.assign({}, baseProps, {
+            canvasStyle: canvasStyle
+          }));
+        }
+      case _constants.CHART_TYPE.BAR_STACK:
+        {
+          const {
+            config
+          } = chart;
+          const {
+            column_groupby_multiple_numeric_column
+          } = config;
+          const BarGroupComponent = column_groupby_multiple_numeric_column ? _barStack.default : _barGroup.default;
+          return /*#__PURE__*/_react.default.createElement(BarGroupComponent, Object.assign({}, baseProps, {
+            canvasStyle: canvasStyle
+          }));
+        }
+      case _constants.CHART_TYPE.COMPARE_BAR:
+        {
+          return /*#__PURE__*/_react.default.createElement(_barCompare.default, Object.assign({}, baseProps, {
+            canvasStyle: canvasStyle
+          }));
+        }
+      case _constants.CHART_TYPE.BAR_CUSTOM:
+        {
+          return /*#__PURE__*/_react.default.createElement(_barCustomStack.default, Object.assign({}, baseProps, {
+            canvasStyle: canvasStyle
+          }));
+        }
       case _constants.CHART_TYPE.BASIC_NUMBER_CARD:
         {
           return /*#__PURE__*/_react.default.createElement(_basicNumberCard.default, Object.assign({}, baseProps, {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sea-chart",
-  "version": "2.0.7",
+  "version": "2.0.9",
   "main": "./dist/index.js",
   "dependencies": {
     "@dnd-kit/core": "^6.1.0",
@@ -135,6 +135,7 @@
     "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",