dtable-statistic 4.4.24-alpha.9 → 5.0.0

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

@@ -0,0 +1,463 @@
+"use strict";
+
+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 _dayjs = _interopRequireDefault(require("dayjs"));
+var _weekOfYear = _interopRequireDefault(require("dayjs/plugin/weekOfYear"));
+var _reactIntlUniversal = _interopRequireDefault(require("react-intl-universal"));
+var _dtableUtils = require("dtable-utils");
+var _baseChart = _interopRequireDefault(require("./base-chart"));
+var _customG = require("../custom-g2");
+var _commonUtils = require("../utils/common-utils");
+var _constants = require("../constants");
+var _statisticCustomModule = _interopRequireDefault(require("../assets/css/statistic-custom.module.css"));
+_dayjs.default.extend(_weekOfYear.default);
+class HeatMap extends _baseChart.default {
+  constructor(props) {
+    super(props);
+    this.destroyChart = () => {
+      this.chart.destroy();
+      this.chart = null;
+    };
+    this.transformData = statData => {
+      let data = {};
+      let yearFirstDate = (0, _dayjs.default)(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 = statData => {
+      let momentDate = (0, _dayjs.default)(this.firstDate);
+      const year = momentDate.year();
+      const gridData = [];
+      const isLeapYear = year % 4 > 0 ? false : true;
+      let yearDayCount = 365;
+      if (isLeapYear) {
+        yearDayCount = 366;
+      }
+      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;
+        }
+        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,
+          week,
+          month
+        });
+        momentDate = momentDate.add(1, 'days');
+      }
+      return gridData;
+    };
+    this.getLabel = val => {
+      const currentDate = (0, _dayjs.default)(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
+      if (isFirst) {
+        return _reactIntlUniversal.default.get(_constants.MONTH_MIRROR[month]);
+      }
+      return '';
+    };
+    this.drawChart = statData => {
+      this.maxValue = 0;
+      const {
+        getTableById,
+        statItem
+      } = this.props;
+      const currentColorOption = _constants.COLOR_OPTIONS.filter(item => item.name === statItem.data_color)[0] || _constants.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
+       * count: the calendar count
+       * 30: the top padding of the chart
+       * 15: the spacing of calendar
+       */
+
+      let {
+        grid_size,
+        grid_distance
+      } = statItem;
+      grid_size = grid_size || _constants.DEFAULT_GRID_SIZE;
+      grid_distance = grid_distance || _constants.DEFAULT_GRID_DISTANCE;
+      // height for 1 year
+      const yearHeight = grid_size * 7 + grid_distance * 6 + 8;
+      const chartHeight = (yearHeight + 30) * count + 30 + (count - 1) * 15;
+      this.chart = new _customG.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', e => {
+        const clickDate = e.data.data.date;
+        const data = statData.data.find(i => i.name === clickDate);
+        this.props.toggleStatisticRecordsDialog(data, statItem);
+      });
+      this.chart.tooltip({
+        title: 'date',
+        showMarkers: false,
+        showTitle: false,
+        shared: true,
+        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(_reactIntlUniversal.default.get(_constants.TITLE_AMOUNT), " : {value}<div></div>"),
+        domStyles: {
+          'g2-tooltip': this.getDefaultChartStyleByKey('g2-tooltip'),
+          'tooltip-item': this.getDefaultChartStyleByKey('tooltip-item')
+        }
+      });
+      this.chart.axis(false);
+      this.chart.data(statData.data);
+      const themeColors = this.getThemeColors();
+      let columnData = _constants.DEFAULT_NUMBER_FORMAT_OBJECT;
+      const {
+        table_id,
+        summary_type,
+        summary_column,
+        summary_method
+      } = statItem;
+      if (summary_type === _constants.SUMMARY_TYPE.ADVANCED) {
+        const table = getTableById(table_id);
+        const summaryColumn = (0, _dtableUtils.getTableColumnByKey)(table, summary_column) || {};
+        columnData = summaryColumn.data || _constants.DEFAULT_NUMBER_FORMAT_OBJECT;
+      }
+      this.chart.facet('list', {
+        fields: ['year'],
+        cols: 1,
+        showTitle: true,
+        title: {
+          offsetY: yearHeight + 15,
+          offsetX: -((grid_size * 53 + grid_distance * 52) / 2 + 20),
+          style: {
+            fontSize: 12,
+            fill: '#000',
+            fontWeight: '500'
+          }
+        },
+        padding: [0, 0, 15, 0],
+        spacing: [0, 15],
+        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,
+            line: null,
+            label: {
+              offset: 3,
+              rotate: 0,
+              autoHide: false,
+              autoRotate: false,
+              autoEllipsis: false,
+              style: {
+                fontSize: 12,
+                fill: themeColors.textColor
+              },
+              formatter: (val, label, index) => {
+                return this.getLabel(val);
+              }
+            },
+            grid: null
+          });
+          gridView.axis('day', {
+            grid: null,
+            label: {
+              autoHide: false,
+              autoEllipsis: false,
+              style: {
+                fill: themeColors.textColor
+              }
+            }
+          });
+          gridView.scale({
+            day: {
+              type: 'cat',
+              values: [_reactIntlUniversal.default.get('Sun'), _reactIntlUniversal.default.get('Mon'), _reactIntlUniversal.default.get('Tue'), _reactIntlUniversal.default.get('Wed'), _reactIntlUniversal.default.get('Thu'), _reactIntlUniversal.default.get('Fri'), _reactIntlUniversal.default.get('Sat')]
+            },
+            week: {
+              type: 'cat'
+            },
+            value: {
+              sync: true
+            },
+            date: {
+              type: 'cat'
+            }
+          });
+          gridView.data(gridData);
+          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))];
+          }).customInfo({
+            grid_size,
+            grid_distance
+          }).shape('boundary-polygon').label(false).tooltip('date*value', (date, value) => {
+            return {
+              date,
+              value: this.getNumberDisplayString(value, columnData, summary_method)
+            };
+          });
+          gridView.coordinate().reflect('y');
+        }
+      });
+      this.chart.legend('value', {
+        position: 'top-left',
+        layout: 'horizontal',
+        offsetY: -6,
+        custom: true,
+        itemSpacing: 2,
+        itemName: {
+          style: {
+            fontWeight: 'bold',
+            fill: themeColors.textColor
+          }
+        },
+        items: this.getLegendItems(exampleColors)
+      });
+      this.chart.removeInteraction('legend-filter');
+      this.chart.render();
+    };
+    // get text width in canvas
+    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.default.locale('en');
+    this.state = {
+      isCalculatingData: true,
+      showResultDescription: true
+    };
+    this.calculateData = null;
+    this.maxValue = 0;
+  }
+  componentDidMount() {
+    const {
+      statItem,
+      chartCalculator
+    } = this.props;
+    (0, _customG.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: _constants.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 = (0, _customG.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 (!(0, _commonUtils.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(data => {
+          const showResultDescription = data.years && data.years.length > 0 ? false : true;
+          this.chart && this.destroyChart();
+          this.calculateData = data;
+          this.setState({
+            isCalculatingData: false,
+            showResultDescription
+          }, () => {
+            if (!showResultDescription) {
+              this.drawChart(data);
+            }
+          });
+        });
+      }
+    } else {
+      if (!this.state.showResultDescription) {
+        this.chart && this.destroyChart();
+        this.drawChart(this.calculateData);
+      }
+    }
+  }
+  componentWillUnmount() {
+    this.container = null;
+  }
+  getLegendItems(colors) {
+    const text = _reactIntlUniversal.default.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
+        }
+      }
+    }];
+    colors.forEach((color, index) => {
+      items.push({
+        marker: {
+          symbol: (x, y, r) => this.getLegendItemPath(x, y, r, index + 1, textWidth),
+          spacing: 2,
+          style: {
+            fill: color,
+            lineWidth: 1,
+            stroke: _constants.FILL_BORDER_COLOR_MAP[color],
+            r: 5
+          }
+        }
+      });
+    });
+    items[9].name = _reactIntlUniversal.default.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;
+    }
+    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 = (0, _customG.getRectWithCornerRadius)([p0, p1, p2, p3], this.chart.coordinateInstance, 2);
+    return path;
+  }
+  render() {
+    const {
+      isCalculatingData,
+      showResultDescription
+    } = this.state;
+    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, isCalculatingData && this.renderLoading(), showResultDescription && this.renderEmpty(), /*#__PURE__*/_react.default.createElement("div", {
+      style: {
+        overflow: 'auto',
+        height: '100%',
+        display: 'flex',
+        padding: 15
+      },
+      ref: ref => this.container = ref,
+      className: "".concat(_statisticCustomModule.default['statistic-heatmap-container'], " statistic-chart-container")
+    }));
+  }
+}
+HeatMap.propTypes = {
+  statItem: _propTypes.default.object,
+  chartCalculator: _propTypes.default.object,
+  getTableById: _propTypes.default.func,
+  toggleStatisticRecordsDialog: _propTypes.default.func
+};
+var _default = exports.default = HeatMap;