dtable-statistic 4.2.2 → 4.3.0

package/es/stat-view/heat-map.js

@@ -1,8 +1,3 @@
-import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
-import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
-import _createClass from "@babel/runtime/helpers/esm/createClass";
-import _inherits from "@babel/runtime/helpers/esm/inherits";
-import _createSuper from "@babel/runtime/helpers/esm/createSuper";
 import React from 'react';
 import PropTypes from 'prop-types';
 import dayjs from 'dayjs';
@@ -15,61 +10,57 @@ import { isShapeEqual } from '../utils/common-utils';
 import { COLOR_OPTIONS, DEFAULT_GRID_DISTANCE, DEFAULT_GRID_SIZE, DEFAULT_NUMBER_FORMAT_OBJECT, FILL_BORDER_COLOR_MAP, MONTH_MIRROR, SUMMARY_TYPE, TITLE_AMOUNT } from '../constants';
 import styles from '../assets/css/statistic-custom.module.css';
 dayjs.extend(weekOfYear);
-var HeatMap = /*#__PURE__*/function (_BaseChart) {
-  _inherits(HeatMap, _BaseChart);
-  var _super = _createSuper(HeatMap);
-  function HeatMap(props) {
-    var _this;
-    _classCallCheck(this, HeatMap);
-    _this = _super.call(this, props);
-    _this.destroyChart = function () {
-      _this.chart.destroy();
-      _this.chart = null;
+class HeatMap extends BaseChart {
+  constructor(props) {
+    super(props);
+    this.destroyChart = () => {
+      this.chart.destroy();
+      this.chart = null;
     };
-    _this.transformData = function (statData) {
-      var data = {};
-      var yearFirstDate = dayjs(statData[0].name);
-      _this.firstDate = yearFirstDate.year() + '-01-01';
-      statData.forEach(function (item) {
+    this.transformData = statData => {
+      let data = {};
+      let yearFirstDate = dayjs(statData[0].name);
+      this.firstDate = yearFirstDate.year() + '-01-01';
+      statData.forEach(item => {
         data[item.name] = data[item.name] ? data[item.name] + item.value : item.value;
       });
       return data;
     };
-    _this.generateBackgroundGridData = function (statData) {
-      var momentDate = dayjs(_this.firstDate);
-      var year = momentDate.year();
-      var gridData = [];
-      var isLeapYear = year % 4 > 0 ? false : true;
-      var yearDayCount = 365;
+    this.generateBackgroundGridData = statData => {
+      let momentDate = dayjs(this.firstDate);
+      const year = momentDate.year();
+      const gridData = [];
+      const isLeapYear = year % 4 > 0 ? false : true;
+      let yearDayCount = 365;
       if (isLeapYear) {
         yearDayCount = 366;
       }
-      for (var i = 0; i < yearDayCount; i++) {
-        var day = momentDate.day();
-        var week = momentDate.week() - 1;
-        var month = momentDate.month();
+      for (let i = 0; i < yearDayCount; i++) {
+        const day = momentDate.day();
+        let week = momentDate.week() - 1;
+        const month = momentDate.month();
         if (week === 0 && month === 11) {
           week = 52;
         }
-        var yearDate = momentDate.format('YYYY-MM-DD');
-        var value = statData[yearDate] || 0;
-        _this.maxValue = Math.max(_this.maxValue, value);
+        const yearDate = momentDate.format('YYYY-MM-DD');
+        const value = statData[yearDate] || 0;
+        this.maxValue = Math.max(this.maxValue, value);
         gridData.push({
           date: yearDate,
           value: statData[yearDate],
-          day: day,
-          week: week,
-          month: month
+          day,
+          week,
+          month
         });
         momentDate = momentDate.add(1, 'days');
       }
       return gridData;
     };
-    _this.getLabel = function (val) {
-      var currentDate = dayjs(_this.firstDate).add(val * 7, 'days');
-      var month = currentDate.month();
-      var monthDate = currentDate.date();
-      var isFirst = monthDate <= 7 || false;
+    this.getLabel = val => {
+      const currentDate = dayjs(this.firstDate).add(val * 7, 'days');
+      let month = currentDate.month();
+      let monthDate = currentDate.date();
+      let isFirst = monthDate <= 7 || false;
 
       // if the week is the first week of a month
       // mark it to axis
@@ -78,16 +69,17 @@ var HeatMap = /*#__PURE__*/function (_BaseChart) {
       }
       return '';
     };
-    _this.drawChart = function (statData) {
-      _this.maxValue = 0;
-      var _this$props = _this.props,
-        getTableById = _this$props.getTableById,
-        statItem = _this$props.statItem;
-      var currentColorOption = COLOR_OPTIONS.filter(function (item) {
-        return item.name == statItem.data_color;
-      })[0] || COLOR_OPTIONS[0];
-      var exampleColors = currentColorOption.exampleColors;
-      var count = statData.years.length;
+    this.drawChart = statData => {
+      this.maxValue = 0;
+      const {
+        getTableById,
+        statItem
+      } = this.props;
+      const currentColorOption = COLOR_OPTIONS.filter(item => item.name == statItem.data_color)[0] || COLOR_OPTIONS[0];
+      const {
+        exampleColors
+      } = currentColorOption;
+      const count = statData.years.length;
       /**
        * 114: 12 * 7 + 6 * 4 + 8(mistake)
        * 30: the bottom padding of one calendar
@@ -96,29 +88,29 @@ var HeatMap = /*#__PURE__*/function (_BaseChart) {
        * 15: the spacing of calendar
        */
 
-      var grid_size = statItem.grid_size,
-        grid_distance = statItem.grid_distance;
+      let {
+        grid_size,
+        grid_distance
+      } = statItem;
       grid_size = grid_size || DEFAULT_GRID_SIZE;
       grid_distance = grid_distance || DEFAULT_GRID_DISTANCE;
       // height for 1 year
-      var yearHeight = grid_size * 7 + grid_distance * 6 + 8;
-      var chartHeight = (yearHeight + 30) * count + 30 + (count - 1) * 15;
-      _this.chart = new Chart({
-        container: _this.container,
+      const yearHeight = grid_size * 7 + grid_distance * 6 + 8;
+      const chartHeight = (yearHeight + 30) * count + 30 + (count - 1) * 15;
+      this.chart = new Chart({
+        container: this.container,
         autoFit: false,
         height: chartHeight,
         width: grid_size * 53 + grid_distance * 52 + 75,
         // 75: left padding + right padding
         padding: [30, 30, 0, 45]
       });
-      _this.chart.on('element:click', function (e) {
-        var clickDate = e.data.data.date;
-        var data = statData.data.find(function (i) {
-          return i.name === clickDate;
-        });
-        _this.props.toggleStatisticRecordsDialog(data, statItem);
+      this.chart.on('element:click', e => {
+        const clickDate = e.data.data.date;
+        const data = statData.data.find(i => i.name === clickDate);
+        this.props.toggleStatisticRecordsDialog(data, statItem);
       });
-      _this.chart.tooltip({
+      this.chart.tooltip({
         title: 'date',
         showMarkers: false,
         showTitle: false,
@@ -126,24 +118,26 @@ var HeatMap = /*#__PURE__*/function (_BaseChart) {
         containerTpl: '<div class="g2-tooltip"><div class="g2-tooltip-list"></div></div>',
         itemTpl: "<div class=\"g2-tooltip-content\"><div style=\"width: max-content; text-align: left;\" class=\"tooltip-name\">{date}<div><div style=\"word-break: keep-all;\"  class=\"tooltip-item\">".concat(intl.get(TITLE_AMOUNT), " : {value}<div></div>"),
         domStyles: {
-          'g2-tooltip': _this.getDefaultChartStyleByKey('g2-tooltip'),
-          'tooltip-item': _this.getDefaultChartStyleByKey('tooltip-item')
+          'g2-tooltip': this.getDefaultChartStyleByKey('g2-tooltip'),
+          'tooltip-item': this.getDefaultChartStyleByKey('tooltip-item')
         }
       });
-      _this.chart.axis(false);
-      _this.chart.data(statData.data);
-      var themeColors = _this.getThemeColors();
-      var columnData = DEFAULT_NUMBER_FORMAT_OBJECT;
-      var table_id = statItem.table_id,
-        summary_type = statItem.summary_type,
-        summary_column = statItem.summary_column,
-        summary_method = statItem.summary_method;
+      this.chart.axis(false);
+      this.chart.data(statData.data);
+      const themeColors = this.getThemeColors();
+      let columnData = DEFAULT_NUMBER_FORMAT_OBJECT;
+      const {
+        table_id,
+        summary_type,
+        summary_column,
+        summary_method
+      } = statItem;
       if (summary_type === SUMMARY_TYPE.ADVANCED) {
-        var table = getTableById(table_id);
-        var summaryColumn = TableUtils.getTableColumnByKey(table, summary_column) || {};
+        const table = getTableById(table_id);
+        const summaryColumn = TableUtils.getTableColumnByKey(table, summary_column) || {};
         columnData = summaryColumn.data || DEFAULT_NUMBER_FORMAT_OBJECT;
       }
-      _this.chart.facet('list', {
+      this.chart.facet('list', {
         fields: ['year'],
         cols: 1,
         showTitle: true,
@@ -158,10 +152,10 @@ var HeatMap = /*#__PURE__*/function (_BaseChart) {
         },
         padding: [0, 0, 15, 0],
         spacing: [0, 15],
-        eachView: function eachView(view, facet) {
-          var groupStatData = _this.transformData(facet.data);
-          var gridData = _this.generateBackgroundGridData(groupStatData);
-          var gridView = view.createView();
+        eachView: (view, facet) => {
+          let groupStatData = this.transformData(facet.data);
+          const gridData = this.generateBackgroundGridData(groupStatData);
+          const gridView = view.createView();
           gridView.axis('week', {
             position: 'top',
             tickLine: null,
@@ -176,8 +170,8 @@ var HeatMap = /*#__PURE__*/function (_BaseChart) {
                 fontSize: 12,
                 fill: themeColors.textColor
               },
-              formatter: function formatter(val, label, index) {
-                return _this.getLabel(val);
+              formatter: (val, label, index) => {
+                return this.getLabel(val);
               }
             },
             grid: null
@@ -208,25 +202,25 @@ var HeatMap = /*#__PURE__*/function (_BaseChart) {
             }
           });
           gridView.data(gridData);
-          gridView.polygon().position('week*day*date').color('value', function (value) {
+          gridView.polygon().position('week*day*date').color('value', value => {
             if (!value || value <= 0) {
               return '#EBEDF0';
             }
-            if (value === _this.maxValue) return exampleColors[8];
-            return exampleColors[Math.floor(value / (_this.maxValue / 9))];
+            if (value === this.maxValue) return exampleColors[8];
+            return exampleColors[Math.floor(value / (this.maxValue / 9))];
           }).customInfo({
-            grid_size: grid_size,
-            grid_distance: grid_distance
-          }).shape('boundary-polygon').label(false).tooltip('date*value', function (date, value) {
+            grid_size,
+            grid_distance
+          }).shape('boundary-polygon').label(false).tooltip('date*value', (date, value) => {
             return {
-              date: date,
-              value: _this.getNumberDisplayString(value, columnData, summary_method)
+              date,
+              value: this.getNumberDisplayString(value, columnData, summary_method)
             };
           });
           gridView.coordinate().reflect('y');
         }
       });
-      _this.chart.legend('value', {
+      this.chart.legend('value', {
         position: 'top-left',
         layout: 'horizontal',
         offsetY: -6,
@@ -238,241 +232,221 @@ var HeatMap = /*#__PURE__*/function (_BaseChart) {
             fill: themeColors.textColor
           }
         },
-        items: _this.getLegendItems(exampleColors)
+        items: this.getLegendItems(exampleColors)
       });
-      _this.chart.removeInteraction('legend-filter');
-      _this.chart.render();
+      this.chart.removeInteraction('legend-filter');
+      this.chart.render();
     };
     // get text width in canvas
-    _this.getTextWidthInCanvas = function (text) {
-      var canvas = document.createElement('canvas');
-      var context = canvas.getContext('2d');
-      var font = context.font;
-      var fontStyle = font.slice(font.indexOf('px'));
+    this.getTextWidthInCanvas = text => {
+      let canvas = document.createElement('canvas');
+      const context = canvas.getContext('2d');
+      let font = context.font;
+      const fontStyle = font.slice(font.indexOf('px'));
       font = 'bold ' + 12 + fontStyle;
       context.font = font;
       return Math.ceil(context.measureText(text).width);
     };
     dayjs.locale('en');
-    _this.state = {
+    this.state = {
       isCalculatingData: true,
       showResultDescription: true
     };
-    _this.calculateData = null;
-    _this.maxValue = 0;
-    return _this;
+    this.calculateData = null;
+    this.maxValue = 0;
   }
-  _createClass(HeatMap, [{
-    key: "componentDidMount",
-    value: function componentDidMount() {
-      var _this2 = this;
-      var _this$props2 = this.props,
-        statItem = _this$props2.statItem,
-        chartCalculator = _this$props2.chartCalculator;
-      registerShape('polygon', 'boundary-polygon', {
-        draw: function draw(cfg, container) {
-          if (cfg && cfg.points && cfg.points.length > 0) {
-            var group = container.addGroup();
-            var attrs = {
-              fill: cfg.color,
-              lineWidth: 1,
-              stroke: FILL_BORDER_COLOR_MAP[cfg.color]
-            };
-            var points = cfg.points,
-              customInfo = cfg.customInfo;
-            var grid_size = customInfo.grid_size,
-              grid_distance = customInfo.grid_distance;
-            var distance = grid_distance / 2;
-            var offset = grid_size - 1;
-            var parsedPoint = this.parsePoints(points);
-            var _parsedPoint = _slicedToArray(parsedPoint, 4),
-              p0 = _parsedPoint[0],
-              p1 = _parsedPoint[1],
-              p2 = _parsedPoint[2],
-              p3 = _parsedPoint[3];
-            p0.y = p0.y + distance;
-            p1.x = p0.x;
-            p1.y = p0.y + offset;
-            p2.x = p0.x + offset;
-            p2.y = p1.y;
-            p3.x = p0.x + offset;
-            p3.y = p0.y;
-            // get cell path that has radius, the cell radius is 2;
-            var path = getRectWithCornerRadius(parsedPoint, this.coordinate, 2);
-            attrs.path = path;
-            group.addShape('path', {
-              attrs: attrs,
-              capture: cfg.data.value > 0,
-              visible: true
-            });
-            return group;
-          }
+  componentDidMount() {
+    const {
+      statItem,
+      chartCalculator
+    } = this.props;
+    registerShape('polygon', 'boundary-polygon', {
+      draw(cfg, container) {
+        if (cfg && cfg.points && cfg.points.length > 0) {
+          const group = container.addGroup();
+          let attrs = {
+            fill: cfg.color,
+            lineWidth: 1,
+            stroke: FILL_BORDER_COLOR_MAP[cfg.color]
+          };
+          const {
+            points,
+            customInfo
+          } = cfg;
+          const {
+            grid_size,
+            grid_distance
+          } = customInfo;
+          const distance = grid_distance / 2;
+          const offset = grid_size - 1;
+          const parsedPoint = this.parsePoints(points);
+          let [p0, p1, p2, p3] = parsedPoint;
+          p0.y = p0.y + distance;
+          p1.x = p0.x;
+          p1.y = p0.y + offset;
+          p2.x = p0.x + offset;
+          p2.y = p1.y;
+          p3.x = p0.x + offset;
+          p3.y = p0.y;
+          // get cell path that has radius, the cell radius is 2;
+          const path = getRectWithCornerRadius(parsedPoint, this.coordinate, 2);
+          attrs.path = path;
+          group.addShape('path', {
+            attrs,
+            capture: cfg.data.value > 0,
+            visible: true
+          });
+          return group;
         }
+      }
+    });
+    if (this.container) {
+      chartCalculator.calculate(statItem).then(data => {
+        const showResultDescription = data.years && data.years.length > 0 ? false : true;
+        this.calculateData = data;
+        this.setState({
+          isCalculatingData: false,
+          showResultDescription
+        }, () => {
+          if (!showResultDescription) {
+            this.drawChart(data);
+            this.calculateData = data;
+          }
+        });
+      });
+    }
+  }
+  shouldComponentUpdate(nextProps, nextState) {
+    const {
+      statItem
+    } = this.props;
+    if (this.canUpdate(this.props, nextProps)) {
+      if (!isShapeEqual(nextProps.statItem.layout, statItem.layout)) {
+        return false;
+      }
+      return true;
+    }
+    if (nextState.isCalculatingData !== this.state.isCalculatingData) {
+      return true;
+    }
+    return false;
+  }
+  componentDidUpdate(preProps, preState) {
+    const {
+      statItem,
+      chartCalculator
+    } = this.props;
+    const {
+      isCalculatingData
+    } = this.state;
+    if (isCalculatingData !== preState.isCalculatingData) return;
+    if (this.shouldCalculateStatItem(preProps, this.props)) {
+      this.setState({
+        isCalculatingData: true
       });
       if (this.container) {
-        chartCalculator.calculate(statItem).then(function (data) {
-          var showResultDescription = data.years && data.years.length > 0 ? false : true;
-          _this2.calculateData = data;
-          _this2.setState({
+        chartCalculator.calculate(statItem).then(data => {
+          const showResultDescription = data.years && data.years.length > 0 ? false : true;
+          this.chart && this.destroyChart();
+          this.calculateData = data;
+          this.setState({
             isCalculatingData: false,
-            showResultDescription: showResultDescription
-          }, function () {
+            showResultDescription
+          }, () => {
             if (!showResultDescription) {
-              _this2.drawChart(data);
-              _this2.calculateData = data;
+              this.drawChart(data);
             }
           });
         });
       }
-    }
-  }, {
-    key: "shouldComponentUpdate",
-    value: function shouldComponentUpdate(nextProps, nextState) {
-      var statItem = this.props.statItem;
-      if (this.canUpdate(this.props, nextProps)) {
-        if (!isShapeEqual(nextProps.statItem.layout, statItem.layout)) {
-          return false;
-        }
-        return true;
-      }
-      if (nextState.isCalculatingData !== this.state.isCalculatingData) {
-        return true;
+    } else {
+      if (!this.state.showResultDescription) {
+        this.chart && this.destroyChart();
+        this.drawChart(this.calculateData);
       }
-      return false;
     }
-  }, {
-    key: "componentDidUpdate",
-    value: function componentDidUpdate(preProps, preState) {
-      var _this3 = this;
-      var _this$props3 = this.props,
-        statItem = _this$props3.statItem,
-        chartCalculator = _this$props3.chartCalculator;
-      var isCalculatingData = this.state.isCalculatingData;
-      if (isCalculatingData !== preState.isCalculatingData) return;
-      if (this.shouldCalculateStatItem(preProps, this.props)) {
-        this.setState({
-          isCalculatingData: true
-        });
-        if (this.container) {
-          chartCalculator.calculate(statItem).then(function (data) {
-            var showResultDescription = data.years && data.years.length > 0 ? false : true;
-            _this3.chart && _this3.destroyChart();
-            _this3.calculateData = data;
-            _this3.setState({
-              isCalculatingData: false,
-              showResultDescription: showResultDescription
-            }, function () {
-              if (!showResultDescription) {
-                _this3.drawChart(data);
-              }
-            });
-          });
-        }
-      } else {
-        if (!this.state.showResultDescription) {
-          this.chart && this.destroyChart();
-          this.drawChart(this.calculateData);
+  }
+  componentWillUnmount() {
+    this.container = null;
+  }
+  getLegendItems(colors) {
+    const text = intl.get('Less');
+    const textWidth = this.getTextWidthInCanvas(text);
+    const items = [{
+      name: text,
+      marker: {
+        symbol: (x, y, r) => this.getLegendItemPath(x, y, r, 0, textWidth),
+        spacing: 0,
+        style: {
+          fill: '#E1E3E6',
+          lineWidth: 1,
+          stroke: '#EBEDF0',
+          r: 5
         }
       }
-    }
-  }, {
-    key: "componentWillUnmount",
-    value: function componentWillUnmount() {
-      this.container = null;
-    }
-  }, {
-    key: "getLegendItems",
-    value: function getLegendItems(colors) {
-      var _this4 = this;
-      var text = intl.get('Less');
-      var textWidth = this.getTextWidthInCanvas(text);
-      var items = [{
-        name: text,
+    }];
+    colors.forEach((color, index) => {
+      items.push({
         marker: {
-          symbol: function symbol(x, y, r) {
-            return _this4.getLegendItemPath(x, y, r, 0, textWidth);
-          },
-          spacing: 0,
+          symbol: (x, y, r) => this.getLegendItemPath(x, y, r, index + 1, textWidth),
+          spacing: 2,
           style: {
-            fill: '#E1E3E6',
+            fill: color,
             lineWidth: 1,
-            stroke: '#EBEDF0',
+            stroke: FILL_BORDER_COLOR_MAP[color],
             r: 5
           }
         }
-      }];
-      colors.forEach(function (color, index) {
-        items.push({
-          marker: {
-            symbol: function symbol(x, y, r) {
-              return _this4.getLegendItemPath(x, y, r, index + 1, textWidth);
-            },
-            spacing: 2,
-            style: {
-              fill: color,
-              lineWidth: 1,
-              stroke: FILL_BORDER_COLOR_MAP[color],
-              r: 5
-            }
-          }
-        });
       });
-      items[9].name = intl.get('More');
-      items[9].marker.spacing = 22;
-      return items;
-    }
-  }, {
-    key: "getLegendItemPath",
-    value: function getLegendItemPath(x, y, r, index, textWidth) {
-      // x, y represents the coordinates of the center point of the legend item marker
-      var p0 = {
-        x: x - 6,
-        y: y + 6
-      };
-      // translate the lengend marker to right to make the first legend item text to left of the marker
-      if (index === 0) {
-        p0.x = p0.x + textWidth + 16;
-      } else {
-        p0.x = p0.x + 18;
-      }
-      var p1 = {
-        x: p0.x,
-        y: p0.y - 12
-      };
-      var p2 = {
-        x: p0.x + 12,
-        y: p0.y - 12
-      };
-      var p3 = {
-        x: p0.x + 12,
-        y: p0.y
-      };
-      var path = getRectWithCornerRadius([p0, p1, p2, p3], this.chart.coordinateInstance, 2);
-      return path;
-    }
-  }, {
-    key: "render",
-    value: function render() {
-      var _this5 = this;
-      var _this$state = this.state,
-        isCalculatingData = _this$state.isCalculatingData,
-        showResultDescription = _this$state.showResultDescription;
-      return /*#__PURE__*/React.createElement(React.Fragment, null, isCalculatingData && this.renderLoading(), showResultDescription && this.renderEmpty(), /*#__PURE__*/React.createElement("div", {
-        style: {
-          overflow: 'auto',
-          height: '100%',
-          display: 'flex',
-          padding: 15
-        },
-        ref: function ref(_ref) {
-          return _this5.container = _ref;
-        },
-        className: "".concat(styles['statistic-heatmap-container'], " statistic-chart-container")
-      }));
+    });
+    items[9].name = intl.get('More');
+    items[9].marker.spacing = 22;
+    return items;
+  }
+  getLegendItemPath(x, y, r, index, textWidth) {
+    // x, y represents the coordinates of the center point of the legend item marker
+    let p0 = {
+      x: x - 6,
+      y: y + 6
+    };
+    // translate the lengend marker to right to make the first legend item text to left of the marker
+    if (index === 0) {
+      p0.x = p0.x + textWidth + 16;
+    } else {
+      p0.x = p0.x + 18;
     }
-  }]);
-  return HeatMap;
-}(BaseChart);
+    const p1 = {
+      x: p0.x,
+      y: p0.y - 12
+    };
+    const p2 = {
+      x: p0.x + 12,
+      y: p0.y - 12
+    };
+    const p3 = {
+      x: p0.x + 12,
+      y: p0.y
+    };
+    const path = getRectWithCornerRadius([p0, p1, p2, p3], this.chart.coordinateInstance, 2);
+    return path;
+  }
+  render() {
+    const {
+      isCalculatingData,
+      showResultDescription
+    } = this.state;
+    return /*#__PURE__*/React.createElement(React.Fragment, null, isCalculatingData && this.renderLoading(), showResultDescription && this.renderEmpty(), /*#__PURE__*/React.createElement("div", {
+      style: {
+        overflow: 'auto',
+        height: '100%',
+        display: 'flex',
+        padding: 15
+      },
+      ref: ref => this.container = ref,
+      className: "".concat(styles['statistic-heatmap-container'], " statistic-chart-container")
+    }));
+  }
+}
 HeatMap.propTypes = {
   statItem: PropTypes.object,
   chartCalculator: PropTypes.object,