sea-chart 2.0.30 → 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/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 {
@@ -59,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 = {
@@ -647,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,
@@ -659,7 +685,7 @@ class ChartComponent extends _react.Component {
         legendTextRange,
         bubbleColor,
         type
-      } = _ref;
+      } = _ref2;
       const {
         width: chartWidth,
         height: chartHeight,
@@ -702,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'],
@@ -712,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,
@@ -746,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, ")"));
@@ -831,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,
@@ -864,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
@@ -1078,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'];
@@ -1372,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,
@@ -1381,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
@@ -1389,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,
@@ -1399,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;
@@ -1410,7 +1448,7 @@ class ChartComponent extends _react.Component {
         }
       });
     };
-    this.addLabelToRectCenter = _ref9 => {
+    this.addLabelToRectCenter = _ref10 => {
       let {
         chartType,
         container,
@@ -1421,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,
@@ -1463,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;

package/dist/view/wrapper/heat-map.js

@@ -0,0 +1,323 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _lodashEs = require("lodash-es");
+var d3 = _interopRequireWildcard(require("d3"));
+var _classnames = _interopRequireDefault(require("classnames"));
+var _dayjs = _interopRequireDefault(require("dayjs"));
+var _dtableUtils = require("dtable-utils");
+var _dayOfYear = _interopRequireDefault(require("dayjs/plugin/dayOfYear"));
+var _style = require("../../constants/style");
+var _constants = require("../../constants");
+var _utils = require("../../utils");
+var _intl = _interopRequireDefault(require("../../intl"));
+var _tooltip = _interopRequireDefault(require("../../components/tooltip"));
+var _chartComponent = _interopRequireDefault(require("./chart-component"));
+_dayjs.default.extend(_dayOfYear.default);
+class HeatMap extends _chartComponent.default {
+  constructor(props) {
+    super(props);
+    this.handleResize = () => {
+      this.destroyChart();
+      this.createChart();
+      this.drawChart();
+    };
+    this.createChart = () => {
+      const {
+        chart,
+        result
+      } = this.props;
+      const initConfig = {
+        insertPadding: 30,
+        borderRadius: 0.06,
+        monthAxisHeight: 30
+      };
+      const {
+        width,
+        height
+      } = this.getCustomWidthAndHeight(result, chart.config, initConfig);
+      initConfig['customWidth'] = width;
+      initConfig['customHeight'] = height;
+      this.initChart(this.container, chart === null || chart === void 0 ? void 0 : chart.id, initConfig);
+    };
+    this.drawChart = () => {
+      const {
+        result = {}
+      } = this.props;
+      if (Object.keys(result).length === 0) return;
+      this.draw(result);
+      this.renderAxisLabel(this.props.chart, this.props.tables, this.container);
+    };
+    this.getCustomWidthAndHeight = (result, chartConfig, initConfig) => {
+      const {
+        insertPadding,
+        monthAxisHeight
+      } = initConfig;
+      const count = result.years.length;
+      let {
+        grid_size,
+        grid_distance
+      } = chartConfig;
+      grid_size = grid_size || _constants.DEFAULT_GRID_SIZE;
+      grid_distance = grid_distance || _constants.DEFAULT_GRID_DISTANCE;
+      const yearHeight = grid_size * 7 + grid_distance * 6; // height for 1 year
+      const height = (yearHeight + monthAxisHeight) * count + (insertPadding + insertPadding); // monthAxisHeight is axis height, insertPadding is top and bottm height
+      const width = grid_size * 53 + grid_distance * 52 + (insertPadding + insertPadding); // insertPadding is left and right width
+      return {
+        width,
+        height
+      };
+    };
+    this.showTooltip = (event, data, columnData) => {
+      const {
+        offsetX,
+        offsetY
+      } = event;
+      const newTooltipData = {
+        title: data.name,
+        items: [{
+          color: '',
+          name: _intl.default.get(_constants.TITLE_AMOUNT),
+          value: (0, _dtableUtils.getNumberDisplayString)(data.value, columnData)
+        }]
+      };
+      this.setState({
+        tooltipData: newTooltipData
+      });
+      this.setState({
+        toolTipPosition: {
+          offsetX,
+          offsetY
+        }
+      });
+    };
+    this.moveTooltip = event => {
+      const {
+        offsetX,
+        offsetY
+      } = event;
+      this.setState({
+        toolTipPosition: {
+          offsetX,
+          offsetY
+        }
+      });
+    };
+    this.hiddenTooltip = event => {
+      this.setState({
+        toolTipPosition: null
+      });
+    };
+    this.draw = resultData => {
+      const {
+        data,
+        years
+      } = resultData;
+      const {
+        chart,
+        tables
+      } = this.props;
+      const {
+        width: chartWidth,
+        height: chartHeight,
+        insertPadding,
+        borderRadius,
+        monthAxisHeight
+      } = this.chartBoundingClientRect;
+      let {
+        data_color,
+        grid_size,
+        table_id,
+        summary_type,
+        summary_column
+      } = chart.config;
+      grid_size = grid_size ? grid_size : _constants.DEFAULT_GRID_SIZE;
+      const currentColorOption = _style.COLOR_OPTIONS.filter(item => item.name === data_color)[0] || _style.COLOR_OPTIONS[0];
+      const {
+        exampleColors
+      } = currentColorOption;
+      const themeColors = this.getThemeColors();
+      let columnData = _constants.DEFAULT_NUMBER_FORMAT_OBJECT;
+      if (summary_type === _constants.CHART_SUMMARY_TYPE.ADVANCED) {
+        const table = (0, _dtableUtils.getTableById)(tables, table_id);
+        const summaryColumn = (0, _dtableUtils.getTableColumnByKey)(table, summary_column) || {};
+        columnData = summaryColumn.data || _constants.DEFAULT_NUMBER_FORMAT_OBJECT;
+      }
+      const yAxisWrapper = this.chart.append('g').attr('class', 'y-axis-wrapper');
+      const xAxisWrapper = this.chart.append('g').attr('class', 'x-axis-wrapper');
+      const contentWrapper = this.chart.append('g').attr('class', 'content-wrapper');
+      const titleWrapper = this.chart.append('g').attr('class', 'title-wrapper');
+
+      // Fy scale
+      const fyDomain = new Set(years.map(d => d));
+      const fy = d3.scaleBand().domain(fyDomain).range([insertPadding, chartHeight - insertPadding]).paddingInner(0).paddingOuter(0);
+      Array.from(fyDomain).forEach((year, index) => {
+        // Y axis
+        const y = d3.scaleBand().domain(this.weeks).range([fy(year), fy(year) + (fy.bandwidth() - monthAxisHeight)]).paddingInner(0).paddingOuter(0);
+        yAxisWrapper.append('g').attr('class', "y-axis-".concat(year)).attr('transform', "translate(".concat(insertPadding, ", 0)")).call(d3.axisLeft(y).tickSizeInner(0).tickSizeOuter(0).tickFormat(d => _intl.default.get(d))).call(g => {
+          g.select('.domain').remove();
+          g.selectAll('text').attr('font-size', 12);
+          g.selectAll('text').attr('fill', themeColors.textColor);
+        });
+
+        // Content
+        const [dates, weekCount] = this.generateYearDates(year);
+        const monthTranslateX = [];
+        const weekDomain = Array.from({
+          length: weekCount
+        }, (_, i) => i + 1);
+        const weekScale = d3.scaleBand().domain(weekDomain).range([insertPadding, chartWidth - insertPadding]).paddingInner(0).paddingOuter(0);
+
+        // year
+        const yearWrapper = contentWrapper.append('g').attr('class', "year-wrapper-".concat(year));
+        dates.forEach(_ref => {
+          let [monthIndex, days] = _ref;
+          // month
+          const monthWrapper = yearWrapper.append('g').attr('class', "month-".concat(this.months[monthIndex]));
+          // day
+          days.forEach((d, index) => {
+            monthWrapper.append('rect').attr('class', () => "day-".concat((0, _dayjs.default)(d).dayOfYear())).attr('x', () => {
+              let curWeek = (0, _dayjs.default)(d).week();
+              // The last few days are the first week of the next year
+              if (monthIndex === 11 && curWeek === 1) {
+                curWeek = weekCount;
+              }
+              if (index === 0) {
+                monthTranslateX.push(weekScale(curWeek));
+              } // Record the x position of the first day of each month
+              return weekScale(curWeek);
+            }).attr('y', () => {
+              const curWeek = this.weeks[(0, _dayjs.default)(d).day()];
+              return y(curWeek);
+            }).attr('width', grid_size).attr('height', grid_size).attr('rx', grid_size * borderRadius).attr('fill', () => this.getRectColor(d, data, 'fill', exampleColors)).attr('stroke', () => this.getRectColor(d, data, 'stroke', exampleColors)).attr('stroke-width', 1).on('click', () => {
+              const curDate = data.find(item => item.name === (0, _dayjs.default)(d).format('YYYY-MM-DD'));
+              if (curDate) {
+                this.props.toggleRecords(curDate);
+              }
+            }).on('mouseover', event => {
+              const curDate = data.find(item => item.name === (0, _dayjs.default)(d).format('YYYY-MM-DD'));
+              if (curDate) {
+                this.showTooltip(event, curDate, columnData);
+              }
+            }).on('mousemove', event => {
+              const curDate = data.find(item => item.name === (0, _dayjs.default)(d).format('YYYY-MM-DD'));
+              if (curDate) {
+                this.moveTooltip(event);
+              }
+            }).on('mouseleave', () => {
+              this.hiddenTooltip();
+            });
+          });
+        });
+
+        // X axis
+        const x = d3.scalePoint().domain(this.months).range([insertPadding, chartWidth - insertPadding]);
+        xAxisWrapper.append('g').attr('class', "x-axis-".concat(year)).attr('transform', "translate(0, ".concat(fy(year) + fy.bandwidth() - monthAxisHeight, ")")).call(d3.axisBottom(x).tickSizeInner(0).tickSizeOuter(0).tickFormat(d => _intl.default.get(d))).call(g => {
+          g.select('.domain').remove();
+          g.selectAll('.tick').nodes().forEach((item, index) => {
+            const curTranslateX = monthTranslateX[index] + weekScale.bandwidth() / 2;
+            d3.select(item).attr('transform', "translate(".concat(curTranslateX, ", 0)"));
+          });
+          g.selectAll('text').attr('font-size', 12);
+          g.selectAll('text').attr('fill', themeColors.textColor);
+        });
+
+        // Title
+        titleWrapper.append('text').attr('class', "text-".concat(year)).attr('x', 0).attr('y', fy(year) + fy.bandwidth()).attr('fill', '#000').attr('font-size', 12).attr('font-weight', 500).text(year);
+      });
+      this.setLegendForHeatMap({
+        exampleColors: ['#EBEDF0', ...exampleColors],
+        themeColors
+      });
+    };
+    this.generateYearDates = year => {
+      const dates = [];
+      let current = (0, _dayjs.default)("".concat(year, "-01-01"));
+      while (current.year() === year) {
+        dates.push(current);
+        current = current.add(1, 'day');
+      }
+      const weekCount = Math.ceil(dates.length / 7);
+      return [d3.groups(dates, d => (0, _dayjs.default)(d).month()), weekCount];
+    };
+    this.getRectColor = (d, data, type, exampleColors) => {
+      const maxVal = d3.max(data, d => d.value);
+      const defaultColor = type === 'stroke' ? '#E1E3E6' : '#EBEDF0';
+      const curDate = data.find(item => item.name === (0, _dayjs.default)(d).format('YYYY-MM-DD'));
+      if (curDate) {
+        if (curDate.value <= 0) return defaultColor;
+        if (curDate.value === maxVal) return type === 'stroke' ? _style.FILL_BORDER_COLOR_MAP[exampleColors[8]] : exampleColors[8];
+        const curColor = Math.floor(curDate.value / (maxVal / 9));
+        return type === 'stroke' ? _style.FILL_BORDER_COLOR_MAP[exampleColors[curColor]] : exampleColors[curColor];
+      }
+      return defaultColor;
+    };
+    _dayjs.default.locale('en');
+    this.weeks = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
+    this.months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
+    this.chart = null;
+    this.state = {
+      tooltipData: null,
+      toolTipPosition: null
+    };
+  }
+  componentDidMount() {
+    this.createChart();
+    this.drawChart();
+    this.debouncedHandleResize = (0, _lodashEs.debounce)(this.handleResize, 300);
+    window.addEventListener('resize', this.debouncedHandleResize);
+  }
+  componentDidUpdate(prevProps) {
+    super.componentDidUpdate(prevProps);
+    if (_utils.BaseUtils.shouldChartComponentUpdate(prevProps, this.props)) {
+      this.destroyChart();
+      this.createChart();
+      this.drawChart();
+    }
+  }
+  componentWillUnmount() {
+    this.destroyChart();
+    window.removeEventListener('resize', this.debouncedHandleResize);
+  }
+  render() {
+    const {
+      chart
+    } = this.props;
+    const {
+      tooltipData,
+      toolTipPosition
+    } = this.state;
+    return /*#__PURE__*/_react.default.createElement("div", {
+      ref: ref => this.container = ref,
+      className: (0, _classnames.default)('sea-chart-container', {
+        'show-x-axis-label': this.isShowXAxisLabel(chart),
+        'show-y-axis-label': this.isShowYAxisLabel(chart)
+      })
+    }, /*#__PURE__*/_react.default.createElement(_tooltip.default, {
+      tooltipData: tooltipData,
+      toolTipPosition: toolTipPosition,
+      chart: this.chart
+    }));
+  }
+}
+HeatMap.propTypes = {
+  canvasStyle: _propTypes.default.object,
+  chart: _propTypes.default.object,
+  groupbyColumn: _propTypes.default.object,
+  columnGroupbyColumn: _propTypes.default.object,
+  summaryColumn: _propTypes.default.object,
+  result: _propTypes.default.object,
+  tables: _propTypes.default.array,
+  globalTheme: _propTypes.default.string,
+  chartColorTheme: _propTypes.default.string,
+  toggleRecords: _propTypes.default.func,
+  customRender: _propTypes.default.func
+};
+var _default = exports.default = HeatMap;

package/dist/view/wrapper/index.js

@@ -34,6 +34,8 @@ var _map = _interopRequireDefault(require("./map"));
 var _mapBubble = _interopRequireDefault(require("./map-bubble"));
 var _mapWorld = _interopRequireDefault(require("./map-world"));
 var _mapWorldBubble = _interopRequireDefault(require("./map-world-bubble"));
+var _heatMap = _interopRequireDefault(require("./heat-map"));
+var _mirror = _interopRequireDefault(require("./mirror"));
 var _trend = _interopRequireDefault(require("./trend"));
 var _tableElement = _interopRequireDefault(require("./table-element"));
 const Wrapper = _ref => {
@@ -281,6 +283,18 @@ const Wrapper = _ref => {
             canvasStyle: canvasStyle
           }));
         }
+      case _constants.CHART_TYPE.HEAT_MAP:
+        {
+          return /*#__PURE__*/_react.default.createElement(_heatMap.default, Object.assign({}, baseProps, {
+            canvasStyle: canvasStyle
+          }));
+        }
+      case _constants.CHART_TYPE.MIRROR:
+        {
+          return /*#__PURE__*/_react.default.createElement(_mirror.default, Object.assign({}, baseProps, {
+            canvasStyle: canvasStyle
+          }));
+        }
       case _constants.CHART_TYPE.BASIC_NUMBER_CARD:
         {
           return /*#__PURE__*/_react.default.createElement(_basicNumberCard.default, Object.assign({}, baseProps, {

package/dist/view/wrapper/mirror.js

@@ -0,0 +1,320 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _lodashEs = require("lodash-es");
+var d3 = _interopRequireWildcard(require("d3"));
+var _classnames = _interopRequireDefault(require("classnames"));
+var _dtableUtils = require("dtable-utils");
+var _constants = require("../../constants");
+var _utils = require("../../utils");
+var _intl = _interopRequireDefault(require("../../intl"));
+var _tooltip = _interopRequireDefault(require("../../components/tooltip"));
+var _chartComponent = _interopRequireDefault(require("./chart-component"));
+class Mirror extends _chartComponent.default {
+  constructor(props) {
+    super(props);
+    this.handleResize = () => {
+      this.destroyChart();
+      this.createChart();
+      this.drawChart();
+    };
+    this.createChart = () => {
+      const {
+        chart
+      } = this.props;
+      const initConfig = {
+        insertPadding: 30,
+        bottomLegendSpace: 20
+      };
+      this.initChart(this.container, chart === null || chart === void 0 ? void 0 : chart.id, initConfig);
+    };
+    this.drawChart = () => {
+      let {
+        result
+      } = this.props;
+      const data = _utils.BaseUtils.formatEmptyName(result.data, '', _intl.default.get('Empty'));
+      if (!Array.isArray(data)) return;
+      this.draw({
+        data,
+        colorSet: result.colorSet
+      });
+      this.renderAxisLabel(this.props.chart, this.props.tables, this.container);
+    };
+    this.showTooltip = (event, data) => {
+      const {
+        chart
+      } = this.props;
+      const {
+        summary_type,
+        summary_method
+      } = chart.config;
+      const {
+        offsetX,
+        offsetY
+      } = event;
+      const newTooltipData = {
+        title: summary_type === 'count' ? _intl.default.get(_constants.TITLE_AMOUNT) : _intl.default.get(_constants.CHART_SUMMARY_SHOW[summary_method]),
+        items: [{
+          color: '',
+          name: data.name,
+          value: data.value
+        }]
+      };
+      this.setState({
+        tooltipData: newTooltipData
+      });
+      this.setState({
+        toolTipPosition: {
+          offsetX,
+          offsetY
+        }
+      });
+    };
+    this.moveTooltip = event => {
+      const {
+        offsetX,
+        offsetY
+      } = event;
+      this.setState({
+        toolTipPosition: {
+          offsetX,
+          offsetY
+        }
+      });
+    };
+    this.hiddenTooltip = event => {
+      this.setState({
+        toolTipPosition: null
+      });
+    };
+    this.draw = _ref => {
+      let {
+        data,
+        colorSet
+      } = _ref;
+      const {
+        chart,
+        tables
+      } = this.props;
+      const {
+        table_id,
+        summary_type,
+        summary_column,
+        is_transpose
+      } = chart.config;
+      const {
+        width: chartWidth,
+        height: chartHeight,
+        insertPadding,
+        bottomLegendSpace
+      } = this.chartBoundingClientRect;
+      const themeColors = this.getThemeColors();
+      let columnData = _constants.DEFAULT_NUMBER_FORMAT_OBJECT;
+      if (summary_type === _constants.CHART_SUMMARY_TYPE.ADVANCED) {
+        const table = (0, _dtableUtils.getTableById)(tables, table_id);
+        const summaryColumn = (0, _dtableUtils.getTableColumnByKey)(table, summary_column) || {};
+        columnData = summaryColumn.data || _constants.DEFAULT_NUMBER_FORMAT_OBJECT;
+      }
+      const scaleBandDomain = Array.from(new Set(data.map(d => d.group_name)));
+      const scaleBand = d3.scaleBand().domain(scaleBandDomain).range(is_transpose ? [insertPadding, chartWidth - insertPadding] : [insertPadding, chartHeight - insertPadding - bottomLegendSpace]).paddingInner(0.1).paddingOuter(0);
+
+      // ScaleLinear axis
+      const maxDomain = d3.max(data, d => d.value);
+      const scaleLinear1 = d3.scaleLinear().domain([maxDomain, 0]).range([scaleBand(scaleBandDomain[0]), scaleBand.bandwidth()]);
+      const scaleLinear2 = d3.scaleLinear().domain([0, maxDomain]).range([scaleBand(scaleBandDomain[1]), scaleBand(scaleBandDomain[1]) + scaleBand.bandwidth()]);
+      const scaleLinearWrapper = this.chart.append('g').attr('class', 'scale-linear-axis-wrapper');
+      scaleLinearWrapper.append('g').attr('class', 'scale-linear-1').attr('transform', is_transpose ? "translate(0, ".concat(chartHeight - insertPadding - bottomLegendSpace, ")") : "translate(".concat(insertPadding, ", 0)")).call(is_transpose ? d3.axisBottom(scaleLinear1).tickSizeInner(0).tickSizeOuter(0).ticks(5) : d3.axisLeft(scaleLinear1).tickSizeInner(0).tickSizeOuter(0).ticks(5)).call(g => {
+        g.select('.domain').remove();
+        g.selectAll('text').attr('font-size', themeColors.fontSize).attr('fill', themeColors.textColor);
+        g.selectAll('.tick line').attr('stroke', themeColors.gridColor);
+        is_transpose ? g.selectAll('.tick line').attr('y2', -(chartHeight - insertPadding - insertPadding - bottomLegendSpace)) : g.selectAll('.tick line').attr('x2', chartWidth - insertPadding - insertPadding);
+      });
+      scaleLinearWrapper.append('g').attr('class', 'scale-linear-2').attr('transform', is_transpose ? "translate(0, ".concat(chartHeight - insertPadding - bottomLegendSpace, ")") : "translate(".concat(insertPadding, ", 0)")).call(is_transpose ? d3.axisBottom(scaleLinear2).tickSizeInner(0).tickSizeOuter(0).ticks(5).tickFormat(t => (0, _dtableUtils.getNumberDisplayString)(t, columnData)) : d3.axisLeft(scaleLinear2).tickSizeInner(0).tickSizeOuter(0).ticks(5).tickFormat(t => (0, _dtableUtils.getNumberDisplayString)(t, columnData))).call(g => {
+        g.select('.domain').remove();
+        g.selectAll('text').attr('font-size', themeColors.fontSize).attr('fill', themeColors.textColor);
+        g.selectAll('.tick line').attr('stroke', themeColors.gridColor);
+        is_transpose ? g.selectAll('.tick line').attr('y2', -(chartHeight - insertPadding - insertPadding - bottomLegendSpace)) : g.selectAll('.tick line').attr('x2', chartWidth - insertPadding - insertPadding);
+      });
+
+      // ScaleBand Center axis
+      const scaleBandCenter = d3.scaleBand().domain(new Set(data.map(d => d.name))).range(is_transpose ? [insertPadding, chartHeight - insertPadding - bottomLegendSpace] : [insertPadding, chartWidth - insertPadding]).paddingInner(0.5).paddingOuter(0.1);
+      this.chart.append('g').attr('class', 'scale-band-center-axis-wrapper').attr('transform', is_transpose ? "translate(".concat(scaleLinear1(0), ", 0)") : "translate(0, ".concat(scaleLinear1(0), ")")).call(is_transpose ? d3.axisRight(scaleBandCenter).tickSizeInner(4).tickSizeOuter(0).tickFormat(t => {
+        const name = String(t);
+        return name.length > 5 ? "".concat(name.slice(0, 5), "...") : name;
+      }) : d3.axisBottom(scaleBandCenter).tickSizeInner(4).tickSizeOuter(0).tickFormat(t => {
+        const name = String(t);
+        return name.length > 5 ? "".concat(name.slice(0, 5), "...") : name;
+      })).call(g => {
+        g.select('.domain').remove();
+        g.selectAll('.tick line').attr('stroke', themeColors.XAxisColor);
+        g.selectAll('text').attr('font-size', 12).attr('fill', themeColors.textColor);
+      });
+
+      // Content
+      const contentWrapper = this.chart.append('g').attr('class', 'content-wrapper');
+      contentWrapper.selectAll().data(d3.group(data, d => d.group_name)).join('g').call(g => {
+        // Add title
+        const titleWrapper = this.chart.append('g').attr('class', 'title-wrapper');
+        g.nodes().forEach((item, index) => {
+          const title = item === null || item === void 0 ? void 0 : item.__data__[0];
+          titleWrapper.append('text').text(title || '').attr('dominant-baseline', 'hanging').attr('fill', themeColors.textColor).attr('font-size', 14).attr('font-weight', 500).call(text => {
+            if (text.node()) {
+              var _text$node;
+              const {
+                width
+              } = (_text$node = text.node()) === null || _text$node === void 0 ? void 0 : _text$node.getBoundingClientRect();
+              const endPosition = index === 0 ? scaleLinear1(0) : scaleLinear2(maxDomain);
+              if (is_transpose) {
+                text.attr('x', endPosition - scaleBand.bandwidth() / 2 + width / 2);
+                text.attr('y', 0);
+              } else {
+                text.attr('x', chartWidth - width);
+                text.attr('y', endPosition - scaleBand.bandwidth() / 2);
+              }
+            }
+          });
+        });
+      }).selectAll().data(_ref2 => {
+        let [groupName, d] = _ref2;
+        const newData = d.filter(item => item.value !== 0);
+        newData.groupName = groupName;
+        return newData;
+      }).join('rect').attr('opacity', 1).attr('x', d => {
+        const {
+          group_name,
+          value,
+          name
+        } = d;
+        if (group_name === scaleBandDomain[0]) {
+          return is_transpose ? scaleLinear1(value) : scaleBandCenter(name);
+        }
+        if (group_name === scaleBandDomain[1]) {
+          return is_transpose ? scaleLinear2(0) : scaleBandCenter(name);
+        }
+      }).attr('y', d => {
+        const {
+          group_name,
+          name,
+          value
+        } = d;
+        if (group_name === scaleBandDomain[0]) {
+          return is_transpose ? scaleBandCenter(name) : scaleLinear1(value);
+        }
+        if (group_name === scaleBandDomain[1]) {
+          return is_transpose ? scaleBandCenter(name) : scaleLinear2(0);
+        }
+      }).attr('width', d => {
+        const {
+          group_name,
+          value
+        } = d;
+        if (group_name === scaleBandDomain[0]) {
+          return is_transpose ? scaleLinear1(0) - scaleLinear1(value) : scaleBandCenter.bandwidth();
+        }
+        if (group_name === scaleBandDomain[1]) {
+          return is_transpose ? scaleLinear2(value) - scaleLinear2(0) : scaleBandCenter.bandwidth();
+        }
+      }).attr('height', d => {
+        const {
+          group_name,
+          value
+        } = d;
+        if (group_name === scaleBandDomain[0]) {
+          return is_transpose ? scaleBandCenter.bandwidth() : scaleLinear1(0) - scaleLinear1(value);
+        }
+        if (group_name === scaleBandDomain[1]) {
+          return is_transpose ? scaleBandCenter.bandwidth() : scaleLinear2(value) - scaleLinear2(0);
+        }
+      }).attr('fill', d => {
+        const {
+          color
+        } = d;
+        return color;
+      }).on('click', (event, data) => {
+        this.props.toggleRecords(data);
+      }).on('mouseover', (event, data) => {
+        this.showTooltip(event, data);
+      }).on('mousemove', event => {
+        this.moveTooltip(event);
+      }).on('mouseleave', event => {
+        this.hiddenTooltip(event);
+      });
+      this.setLegend({
+        legendName: 'group_name',
+        theme: themeColors,
+        legendPosition: 'top-left',
+        data,
+        groupColumn: this.props.columnGroupbyColumn,
+        chart,
+        colorScale: key => {
+          const curD = data.find(item => item.group_name === key);
+          return curD.color || '';
+        }
+      });
+    };
+    this.chart = null;
+    this.state = {
+      tooltipData: null,
+      toolTipPosition: null
+    };
+  }
+  componentDidMount() {
+    this.createChart();
+    this.drawChart();
+    this.debouncedHandleResize = (0, _lodashEs.debounce)(this.handleResize, 300);
+    window.addEventListener('resize', this.debouncedHandleResize);
+  }
+  componentDidUpdate(prevProps) {
+    super.componentDidUpdate(prevProps);
+    if (_utils.BaseUtils.shouldChartComponentUpdate(prevProps, this.props)) {
+      this.destroyChart();
+      this.createChart();
+      this.drawChart();
+    }
+  }
+  componentWillUnmount() {
+    this.destroyChart();
+    window.removeEventListener('resize', this.debouncedHandleResize);
+  }
+  render() {
+    const {
+      chart
+    } = this.props;
+    const {
+      tooltipData,
+      toolTipPosition
+    } = this.state;
+    return /*#__PURE__*/_react.default.createElement("div", {
+      ref: ref => this.container = ref,
+      className: (0, _classnames.default)('sea-chart-container', {
+        'show-x-axis-label': this.isShowXAxisLabel(chart),
+        'show-y-axis-label': this.isShowYAxisLabel(chart)
+      })
+    }, /*#__PURE__*/_react.default.createElement(_tooltip.default, {
+      tooltipData: tooltipData,
+      toolTipPosition: toolTipPosition,
+      chart: this.chart
+    }));
+  }
+}
+Mirror.propTypes = {
+  canvasStyle: _propTypes.default.object,
+  chart: _propTypes.default.object,
+  groupbyColumn: _propTypes.default.object,
+  columnGroupbyColumn: _propTypes.default.object,
+  summaryColumn: _propTypes.default.object,
+  result: _propTypes.default.object,
+  tables: _propTypes.default.array,
+  globalTheme: _propTypes.default.string,
+  chartColorTheme: _propTypes.default.string,
+  toggleRecords: _propTypes.default.func,
+  customRender: _propTypes.default.func
+};
+var _default = exports.default = Mirror;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sea-chart",
-  "version": "2.0.30",
+  "version": "2.0.31",
   "main": "./dist/index.js",
   "dependencies": {
     "@dnd-kit/core": "^6.1.0",