dtable-statistic 4.4.23 → 4.4.24-alpha.1

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

@@ -1,463 +0,0 @@
-"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;