sea-chart 2.0.29 → 2.0.31

package/dist/components/types-dialog/index.js

@@ -69,7 +69,7 @@ const TypesDialog = _ref => {
   }, [onChange, selectedType, onToggle]);
   const handleFilterTypes = (0, _react.useCallback)(() => {
     if (hideTypeToggle) {
-      const newChartTypes = _constants.CHART_TYPES.filter(item => ['Histogram', 'Bar_chart', 'Line_chart', 'Area', 'Pie_chart', 'Scatter_chart', 'Combination_chart', 'Map'].includes(item.name));
+      const newChartTypes = _constants.CHART_TYPES.filter(item => ['Histogram', 'Bar_chart', 'Line_chart', 'Area', 'Pie_chart', 'Scatter_chart', 'Combination_chart', 'Map', 'Heat_map', 'Facet_chart'].includes(item.name));
       return newChartTypes;
     }
     return _constants.CHART_TYPES;

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

@@ -503,6 +503,8 @@ BaseUtils.shouldChartComponentUpdate = (prevProps, currentProps) => {
   // global theme changed
   !(0, _shallowequal.default)(prevProps.chartColorTheme, currentProps.chartColorTheme) ||
   // chart color theme changed
+  !(0, _shallowequal.default)(prevProps.resizeSignal, currentProps.resizeSignal) ||
+  // chart container resize changed
   _BaseUtils._isChartDataChange(prevProps, currentProps) || _BaseUtils.isChartStyleChanged(prevProps.chart, currentProps.chart);
 };
 BaseUtils._isCombinationDataChange = (prevResult, currentResult) => {

package/dist/view/index.js

@@ -250,16 +250,20 @@ class View extends _react.default.PureComponent {
   render() {
     var _title$text, _chart$config3;
     const {
-      chart,
+      // style
       className,
-      tables,
       canvasStyle,
       render,
       hideTitle = false,
       globalTheme,
       chartColorTheme,
+      resizeSignal,
+      // data
+      chart,
+      tables,
       isCalculateByView,
       dtableStoreValue,
+      // event
       integratedEventTypes,
       integratedEventBus,
       isBigScreenPlugin
@@ -329,6 +333,7 @@ class View extends _react.default.PureComponent {
       isCalculateByView: isCalculateByView,
       isBigScreenPlugin: isBigScreenPlugin,
       chartColorTheme: chartColorTheme,
+      resizeSignal: resizeSignal,
       integratedEventTypes: integratedEventTypes,
       integratedEventBus: integratedEventBus
     }))));
@@ -344,7 +349,7 @@ const propTypes = exports.propTypes = {
   hideTitle: _propTypes.default.bool,
   render: _propTypes.default.func,
   // User-defined rendering content
-
+  resizeSignal: _propTypes.default.number,
   // data
   chart: _propTypes.default.object.isRequired,
   tables: _propTypes.default.array.isRequired,

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

@@ -22,7 +22,7 @@ class AreaGroup extends _chartComponent.default {
   constructor(props) {
     super(props);
     this.handleResize = () => {
-      this.chart.node() && this.chart.node().remove();
+      this.destroyChart();
       this.createChart();
       this.drawChart();
     };
@@ -370,13 +370,13 @@ class AreaGroup extends _chartComponent.default {
   componentDidUpdate(prevProps) {
     super.componentDidUpdate(prevProps);
     if (_utils.BaseUtils.shouldChartComponentUpdate(prevProps, this.props)) {
-      this.chart.node() && this.chart.node().remove();
+      this.destroyChart();
       this.createChart();
       this.drawChart();
     }
   }
   componentWillUnmount() {
-    this.chart.node() && this.chart.node().remove();
+    this.destroyChart();
     window.removeEventListener('resize', this.debouncedHandleResize);
     super.componentWillUnmount();
   }

package/dist/view/wrapper/area.js

@@ -20,7 +20,7 @@ class Area extends _chartComponent.default {
   constructor(props) {
     super(props);
     this.handleResize = () => {
-      this.chart.node() && this.chart.node().remove();
+      this.destroyChart();
       this.createChart();
       this.drawChart();
     };
@@ -343,13 +343,13 @@ class Area extends _chartComponent.default {
   componentDidUpdate(prevProps) {
     super.componentDidUpdate(prevProps);
     if (_utils.BaseUtils.shouldChartComponentUpdate(prevProps, this.props)) {
-      this.chart.node() && this.chart.node().remove();
+      this.destroyChart();
       this.createChart();
       this.drawChart();
     }
   }
   componentWillUnmount() {
-    this.chart.node() && this.chart.node().remove();
+    this.destroyChart();
     window.removeEventListener('resize', this.debouncedHandleResize);
     super.componentWillUnmount();
   }

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

@@ -299,12 +299,13 @@ class BarCompare extends _chartComponent.default {
   componentDidUpdate(prevProps) {
     super.componentDidUpdate(prevProps);
     if (_chartUtils.BaseUtils.shouldChartComponentUpdate(prevProps, this.props)) {
+      this.destroyChart();
       this.createChart();
       this.drawChart();
     }
   }
   componentWillUnmount() {
-    this.chart.node() && this.chart.node().remove();
+    this.destroyChart();
   }
   render() {
     const {

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

@@ -21,7 +21,7 @@ class BarCustom extends _chartComponent.default {
   constructor(props) {
     super(props);
     this.handleResize = (0, _lodashEs.debounce)(() => {
-      this.chart.node() && this.chart.node().remove();
+      this.destroyChart();
       this.createChart();
       this.drawChart();
     }, 300);
@@ -361,13 +361,13 @@ class BarCustom extends _chartComponent.default {
   componentDidUpdate(prevProps) {
     super.componentDidUpdate(prevProps);
     if (_chartUtils.BaseUtils.shouldChartComponentUpdate(prevProps, this.props)) {
-      this.chart.node() && this.chart.node().remove();
+      this.destroyChart();
       this.createChart();
       this.drawChart();
     }
   }
   componentWillUnmount() {
-    this.chart.node() && this.chart.node().remove();
+    this.destroyChart();
     window.removeEventListener('resize', this.handleResize);
   }
   render() {

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

@@ -22,7 +22,7 @@ class BarGroup extends _chartComponent.default {
   constructor(props) {
     super(props);
     this.handleResize = () => {
-      this.chart.node() && this.chart.node().remove();
+      this.destroyChart();
       this.createChart();
       this.drawChart();
     };
@@ -239,12 +239,13 @@ class BarGroup extends _chartComponent.default {
   componentDidUpdate(prevProps) {
     super.componentDidUpdate(prevProps);
     if (_utils.BaseUtils.shouldChartComponentUpdate(prevProps, this.props)) {
+      this.destroyChart();
       this.createChart();
       this.drawChart();
     }
   }
   componentWillUnmount() {
-    this.chart.node() && this.chart.node().remove();
+    this.destroyChart();
     window.removeEventListener('resize', this.debouncedHandleResize);
   }
   render() {

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

@@ -23,7 +23,7 @@ class BarStack extends _chartComponent.default {
   constructor(props) {
     super(props);
     this.handleResize = () => {
-      this.chart.node() && this.chart.node().remove();
+      this.destroyChart();
       this.createChart();
       this.drawChart();
     };
@@ -342,12 +342,13 @@ class BarStack extends _chartComponent.default {
   componentDidUpdate(prevProps) {
     super.componentDidUpdate(prevProps);
     if (_utils.BaseUtils.shouldChartComponentUpdate(prevProps, this.props)) {
+      this.destroyChart();
       this.createChart();
       this.drawChart();
     }
   }
   componentWillUnmount() {
-    this.chart.node() && this.chart.node().remove();
+    this.destroyChart();
     window.removeEventListener('resize', this.debouncedHandleResize);
   }
   render() {

package/dist/view/wrapper/bar.js

@@ -21,7 +21,7 @@ class Bar extends _chartComponent.default {
   constructor(props) {
     super(props);
     this.handleResize = () => {
-      this.chart.node() && this.chart.node().remove();
+      this.destroyChart();
       this.createChart();
       this.drawChart();
     };
@@ -228,12 +228,13 @@ class Bar extends _chartComponent.default {
   componentDidUpdate(prevProps) {
     super.componentDidUpdate(prevProps);
     if (_utils.BaseUtils.shouldChartComponentUpdate(prevProps, this.props)) {
+      this.destroyChart();
       this.createChart();
       this.drawChart();
     }
   }
   componentWillUnmount() {
-    this.chart.node() && this.chart.node().remove();
+    this.destroyChart();
     window.removeEventListener('resize', this.debouncedHandleResize);
   }
   render() {

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

@@ -12,6 +12,7 @@ var _lodashEs = require("lodash-es");
 var _dtableUtils = require("dtable-utils");
 var _utils = require("../../utils");
 var _constants = require("../../constants");
+var _style = require("../../constants/style");
 var _intl = _interopRequireDefault(require("../../intl"));
 require("../../assets/css/sea-chart-d3-tooltip.css");
 class ChartComponent extends _react.Component {
@@ -27,15 +28,17 @@ class ChartComponent extends _react.Component {
       };
     };
     this.handleResize = (0, _lodashEs.debounce)(() => {
-      var _this$chart;
       if (!this.createChart || !this.drawChart) return;
-      ((_this$chart = this.chart) === null || _this$chart === void 0 ? void 0 : _this$chart.autoPadding) && this.chart.destroy();
+      this.destroyChart();
       this.createChart();
       this.drawChart();
       if (this.needRenderAxisLabel) {
         this.renderAxisLabel(this.props.chart, this.props.tables);
       }
     }, 300);
+    this.destroyChart = () => {
+      this.chart.node() && this.chart.node().remove();
+    };
     this.getTitle = (tables, table_id, yAxisType, yAxisKey) => {
       return yAxisType === _constants.CHART_SUMMARY_TYPE.COUNT ? _intl.default.get('Amount') : this.getAxisLabel(tables, table_id, yAxisKey);
     };
@@ -57,10 +60,12 @@ class ChartComponent extends _react.Component {
       const {
         marginLeft = 0,
         marginRight = 0,
-        marginBottom = 0
+        marginBottom = 0,
+        customWidth,
+        customHeight
       } = initConfig;
-      const width = containerWidth - marginLeft - marginRight;
-      const height = containerHeight - marginBottom;
+      const width = customWidth ? customWidth : containerWidth - marginLeft - marginRight;
+      const height = customHeight ? customHeight : containerHeight - marginBottom;
       _this.chart = d3.create('svg').attr('id', id).attr('width', width).attr('height', height).attr('viewBox', [0, 0, width, height]);
       _this.container.appendChild(_this.chart.node());
       _this.chartBoundingClientRect = {
@@ -645,8 +650,31 @@ class ChartComponent extends _react.Component {
         return _intl.default.get(name) || name;
       }
     };
+    // set legend for heat map
+    this.setLegendForHeatMap = _ref => {
+      let {
+        exampleColors,
+        themeColors
+      } = _ref;
+      const legendOffsetY = 3;
+      const legendItemTextWidth = 32;
+      const legendItemWidth = 12;
+      const legendItemHeight = 12;
+      const legendItemGap = 3;
+      const legendItemRadius = 2;
+      const legendWrapper = this.chart.append('g').attr('class', 'legend-heat-map-wrapper').attr('transform', "translate(0, ".concat(legendOffsetY, ")"));
+
+      // less
+      legendWrapper.append('text').attr('y', 10).attr('fill', themeColors.textColor).attr('font-size', 12).attr('font-weight', 'bold').text(_intl.default.get('Less'));
+      // rect
+      exampleColors.forEach((color, index) => {
+        legendWrapper.append('rect').attr('x', legendItemTextWidth + index * legendItemWidth + index * legendItemGap).attr('width', legendItemWidth).attr('height', legendItemHeight).attr('rx', legendItemRadius).attr('fill', color).attr('stroke', _style.FILL_BORDER_COLOR_MAP[color]).attr('stroke-width', 1);
+      });
+      // more
+      legendWrapper.append('text').attr('x', 182).attr('y', 10).attr('fill', themeColors.textColor).attr('font-size', 12).attr('font-weight', 'bold').text(_intl.default.get('More'));
+    };
     // set continuous legend
-    this.setContinuousLegend = _ref => {
+    this.setContinuousLegend = _ref2 => {
       var _this$chart$node2;
       let {
         previewType,
@@ -657,7 +685,7 @@ class ChartComponent extends _react.Component {
         legendTextRange,
         bubbleColor,
         type
-      } = _ref;
+      } = _ref2;
       const {
         width: chartWidth,
         height: chartHeight,
@@ -700,8 +728,8 @@ class ChartComponent extends _react.Component {
       });
     };
     // set legend
-    this.setLegend = _ref2 => {
-      var _chart$config, _chart$config2, _chart$config3;
+    this.setLegend = _ref3 => {
+      var _chart$config, _chart$config2;
       let {
         legendName,
         theme = _constants.CHART_THEME_COLOR['light'],
@@ -710,12 +738,12 @@ class ChartComponent extends _react.Component {
         colorScale,
         groupColumn,
         chart
-      } = _ref2;
+      } = _ref3;
       if (!this.chart) return;
       this.legendConfig = {
-        legendRectWidth: (chart === null || chart === void 0 ? void 0 : (_chart$config = chart.config) === null || _chart$config === void 0 ? void 0 : _chart$config.type) === _constants.CHART_TYPE.SCATTER ? 8 : 20,
-        legendRectHeight: (chart === null || chart === void 0 ? void 0 : (_chart$config2 = chart.config) === null || _chart$config2 === void 0 ? void 0 : _chart$config2.type) === _constants.CHART_TYPE.SCATTER ? 8 : 6,
-        r: (chart === null || chart === void 0 ? void 0 : (_chart$config3 = chart.config) === null || _chart$config3 === void 0 ? void 0 : _chart$config3.type) === _constants.CHART_TYPE.SCATTER ? 4 : 3,
+        legendRectWidth: [_constants.CHART_TYPE.SCATTER, _constants.CHART_TYPE.MIRROR].includes(chart === null || chart === void 0 ? void 0 : (_chart$config = chart.config) === null || _chart$config === void 0 ? void 0 : _chart$config.type) ? 8 : 20,
+        legendRectHeight: [_constants.CHART_TYPE.SCATTER, _constants.CHART_TYPE.MIRROR].includes(chart === null || chart === void 0 ? void 0 : (_chart$config2 = chart.config) === null || _chart$config2 === void 0 ? void 0 : _chart$config2.type) ? 8 : 6,
+        r: this.getLegendR(chart),
         legendItemPaddingTop: 5,
         legendItemTextPaddingTop: 13,
         legendItemMargin: 20,
@@ -744,12 +772,13 @@ class ChartComponent extends _react.Component {
       // legend offset bottom and When there is only one line of legend, it is displayed in the center (for scatter chart)
       if (bottomLegendSpace) {
         queueMicrotask(() => {
+          const {
+            width,
+            height
+          } = legendWrapper.node().getBoundingClientRect();
           let curTranslateX = 0;
-          const curTranslateY = bottomLegendSpace ? chartHeight - bottomLegendSpace : 0;
+          const curTranslateY = bottomLegendSpace ? chartHeight - height : 0;
           if (groupsData.length === 1) {
-            const {
-              width
-            } = legendWrapper.node().getBoundingClientRect();
             curTranslateX = (chartWidth - width - insertPadding * 2) / 2;
           }
           legendWrapper.attr('transform', "translate(".concat(curTranslateX, ",").concat(curTranslateY, ")"));
@@ -829,14 +858,14 @@ class ChartComponent extends _react.Component {
         });
       }
     };
-    this.renderLegend = _ref3 => {
+    this.renderLegend = _ref4 => {
       let {
         legendWrapper,
         groupData,
         colorScale,
         theme,
         text
-      } = _ref3;
+      } = _ref4;
       const {
         legendItemPaddingTop,
         legendItemTextPaddingTop,
@@ -862,15 +891,15 @@ class ChartComponent extends _react.Component {
           d3.select(item).remove();
         });
       }
-      legendWrapper.selectAll().data(groupData).join('g').attr('data-groupName', _ref4 => {
-        let [groupName] = _ref4;
-        return groupName;
-      }).append('rect').attr('width', legendRectWidth).attr('height', legendRectHeight).attr('y', legendItemPaddingTop).attr('rx', r).attr('fill', _ref5 => {
+      legendWrapper.selectAll().data(groupData).join('g').attr('data-groupName', _ref5 => {
         let [groupName] = _ref5;
+        return groupName;
+      }).append('rect').attr('width', legendRectWidth).attr('height', legendRectHeight).attr('y', legendItemPaddingTop).attr('rx', r).attr('fill', _ref6 => {
+        let [groupName] = _ref6;
         if (colorScale) return colorScale(groupName);
         return this.colorMap[groupName] || _constants.CHART_STYLE_COLORS[0];
-      }).attr('data-text', _ref6 => {
-        let [groupName] = _ref6;
+      }).attr('data-text', _ref7 => {
+        let [groupName] = _ref7;
         return groupName;
       }).call(g => {
         // Add text
@@ -1076,6 +1105,17 @@ class ChartComponent extends _react.Component {
         item.name = item['oldName'];
       });
     };
+    this.getLegendR = chart => {
+      const {
+        config
+      } = chart;
+      const {
+        type
+      } = config;
+      if (type === _constants.CHART_TYPE.SCATTER) return 4;
+      if (type === _constants.CHART_TYPE.MIRROR) return 0;
+      return 3;
+    };
     // theta is pie or ring chart
     this.setLegendForTheta = function (legendName) {
       let theme = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : _constants.CHART_THEME_COLOR['light'];
@@ -1370,7 +1410,7 @@ class ChartComponent extends _react.Component {
         annotationWrapper.append('text').attr('x', chartWidth - insertPadding - 30).attr('y', yScale(goal_value) - 10).attr('fill', '#666').text(goal_label);
       });
     };
-    this.addLabelToRectTop = _ref7 => {
+    this.addLabelToRectTop = _ref8 => {
       let {
         container,
         x,
@@ -1379,7 +1419,7 @@ class ChartComponent extends _react.Component {
         theme,
         label_font_size,
         text
-      } = _ref7;
+      } = _ref8;
       d3.select(container).append('text').attr('stroke', '#fff').attr('stroke-width', 1).attr('paint-order', 'stroke').attr('y', Number(y) - 10).attr('fill', theme.labelColor).attr('font-size', _utils.BaseUtils.getLabelFontSize(label_font_size)).text(text).call(g => {
         const {
           width
@@ -1387,7 +1427,7 @@ class ChartComponent extends _react.Component {
         g.attr('x', Number(x) + Number(xWidth) / 2 - width / 2);
       });
     };
-    this.addLabelToRectRight = _ref8 => {
+    this.addLabelToRectRight = _ref9 => {
       let {
         container,
         x,
@@ -1397,7 +1437,7 @@ class ChartComponent extends _react.Component {
         theme,
         label_font_size,
         text
-      } = _ref8;
+      } = _ref9;
       d3.select(container).append('text').attr('stroke', '#fff').attr('stroke-width', 1).attr('paint-order', 'stroke').attr('x', Number(x) + Number(xWidth) + 10).attr('y', Number(y)).attr('fill', theme.labelColor).attr('dominant-baseline', 'hanging').attr('font-size', _utils.BaseUtils.getLabelFontSize(label_font_size)).text(text).call(g => {
         if (g.node()) {
           var _g$node;
@@ -1408,7 +1448,7 @@ class ChartComponent extends _react.Component {
         }
       });
     };
-    this.addLabelToRectCenter = _ref9 => {
+    this.addLabelToRectCenter = _ref10 => {
       let {
         chartType,
         container,
@@ -1419,7 +1459,7 @@ class ChartComponent extends _react.Component {
         theme,
         label_font_size,
         text
-      } = _ref9;
+      } = _ref10;
       d3.select(container).append('text').attr('stroke', '#fff').attr('stroke-width', 1).attr('paint-order', 'stroke').attr('fill', theme.labelColor).attr('font-size', _utils.BaseUtils.getLabelFontSize(label_font_size)).text(text).call(g => {
         const {
           width,
@@ -1461,13 +1501,13 @@ class ChartComponent extends _react.Component {
       }
     };
     // Use clipPath to make rectangle rounded corners
-    this.addClipPath = _ref10 => {
+    this.addClipPath = _ref11 => {
       let {
         rect,
         parentNode,
         attr,
         rectId
-      } = _ref10;
+      } = _ref11;
       const {
         borderRadius
       } = this.chartBoundingClientRect;
@@ -1676,14 +1716,14 @@ class ChartComponent extends _react.Component {
     this.transitionDuration = 500;
     this.areaTransitionDuration = 200;
   }
+  componentDidMount() {
+    window.addEventListener('resize', this.handleResize);
+  }
   componentDidUpdate(prevProps) {
     if (prevProps.globalTheme !== this.props.globalTheme) {
       this.initLabelStroke(this.props.globalTheme);
     }
   }
-  componentDidMount() {
-    window.addEventListener('resize', this.handleResize);
-  }
   componentWillUnmount() {
     window.removeEventListener('resize', this.handleResize);
   }

package/dist/view/wrapper/combination.js

@@ -21,7 +21,7 @@ class Combination extends _chartComponent.default {
   constructor(props) {
     super(props);
     this.handleResize = () => {
-      this.chart.node() && this.chart.node().remove();
+      this.destroyChart();
       this.createChart();
       this.drawChart();
     };
@@ -458,12 +458,13 @@ class Combination extends _chartComponent.default {
   componentDidUpdate(prevProps) {
     super.componentDidUpdate(prevProps);
     if (_utils.BaseUtils.shouldChartComponentUpdate(prevProps, this.props)) {
+      this.destroyChart();
       this.createChart();
       this.drawChart();
     }
   }
   componentWillUnmount() {
-    this.chart.node() && this.chart.node().remove();
+    this.destroyChart();
     window.removeEventListener('resize', this.debouncedHandleResize);
   }
   render() {

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

@@ -20,7 +20,7 @@ class Completeness extends _chartComponent.default {
   constructor(props) {
     super(props);
     this.handleResize = () => {
-      this.chart.node() && this.chart.node().remove();
+      this.destroyChart();
       this.createChart();
       this.drawChart();
     };
@@ -357,12 +357,14 @@ class Completeness extends _chartComponent.default {
   componentDidUpdate(prevProps) {
     super.componentDidUpdate(prevProps);
     if (_utils.BaseUtils.shouldChartComponentUpdate(prevProps, this.props)) {
+      this.destroyChart();
+      this.createChart();
       this.drawChart();
     }
   }
   componentWillUnmount() {
     super.componentWillUnmount();
-    this.chart.node() && this.chart.node().remove();
+    this.destroyChart();
     window.removeEventListener('resize', this.debouncedHandleResize);
   }
   render() {

package/dist/view/wrapper/completeness.js

@@ -20,7 +20,7 @@ class Completeness extends _chartComponent.default {
   constructor(props) {
     super(props);
     this.handleResize = () => {
-      this.chart.node() && this.chart.node().remove();
+      this.destroyChart();
       this.createChart();
       this.drawChart();
     };
@@ -300,12 +300,14 @@ class Completeness extends _chartComponent.default {
   componentDidUpdate(prevProps) {
     super.componentDidUpdate(prevProps);
     if (_utils.BaseUtils.shouldChartComponentUpdate(prevProps, this.props)) {
+      this.destroyChart();
+      this.createChart();
       this.drawChart();
     }
   }
   componentWillUnmount() {
     super.componentWillUnmount();
-    this.chart.node() && this.chart.node().remove();
+    this.destroyChart();
     window.removeEventListener('resize', this.debouncedHandleResize);
   }
   render() {