dtable-statistic 4.0.2-test-2

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

@@ -0,0 +1,501 @@
+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';
+import weekOfYear from 'dayjs/plugin/weekOfYear';
+import intl from 'react-intl-universal';
+import { TableUtils, getNumberDisplayString } from 'dtable-store';
+import BaseChart from './base-chart';
+import { Chart, registerShape, getRectWithCornerRadius } from '../custom-g2';
+import { Loading } from '../components';
+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, NO_STATISTIC_RESULTS, STAT_ITEM_THEME_COLORS, 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.transformData = function (statData) {
+      var data = {};
+      var yearFirstDate = dayjs(statData[0].name);
+      _this.firstDate = yearFirstDate.year() + '-01-01';
+      statData.forEach(function (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;
+      if (isLeapYear) {
+        yearDayCount = 366;
+      }
+      for (var i = 0; i < yearDayCount; i++) {
+        var day = momentDate.day();
+        var week = momentDate.week() - 1;
+        var 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);
+        gridData.push({
+          date: yearDate,
+          value: statData[yearDate],
+          day: day,
+          week: week,
+          month: 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;
+
+      // if the week is the first week of a month
+      // mark it to axis
+      if (isFirst) {
+        return intl.get(MONTH_MIRROR[month]);
+      }
+      return '';
+    };
+    _this.drawChart = function (statData) {
+      _this.maxValue = 0;
+      var _this$props = _this.props,
+        getTableById = _this$props.getTableById,
+        isPreview = _this$props.isPreview,
+        isEnlarge = _this$props.isEnlarge,
+        theme = _this$props.theme,
+        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;
+      /**
+       * 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
+       */
+
+      var grid_size = statItem.grid_size,
+        grid_distance = statItem.grid_distance;
+      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,
+        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.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(intl.get(TITLE_AMOUNT), " : {value}<div></div>"),
+        domStyles: {
+          'g2-tooltip': {
+            borderRadius: '2px',
+            backgroundColor: '#fff',
+            padding: '10px'
+          },
+          'tooltip-item': {
+            marginTop: '5px'
+          }
+        }
+      });
+      _this.chart.axis(false);
+      _this.chart.data(statData.data);
+      var themeColors = STAT_ITEM_THEME_COLORS.light;
+      if (theme === 'dark' && !isEnlarge && isPreview) {
+        themeColors = STAT_ITEM_THEME_COLORS.dark;
+      }
+      var columnData = DEFAULT_NUMBER_FORMAT_OBJECT;
+      var table_id = statItem.table_id,
+        summary_type = statItem.summary_type,
+        summary_column = statItem.summary_column;
+      if (summary_type === SUMMARY_TYPE.ADVANCED) {
+        var table = getTableById(table_id);
+        var summaryColumn = TableUtils.getTableColumnByKey(table, summary_column) || {};
+        columnData = summaryColumn.data || 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: function eachView(view, facet) {
+          var groupStatData = _this.transformData(facet.data);
+          var gridData = _this.generateBackgroundGridData(groupStatData);
+          var 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: function 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: [intl.get('Sun'), intl.get('Mon'), intl.get('Tue'), intl.get('Wed'), intl.get('Thu'), intl.get('Fri'), intl.get('Sat')]
+            },
+            week: {
+              type: 'cat'
+            },
+            value: {
+              sync: true
+            },
+            date: {
+              type: 'cat'
+            }
+          });
+          gridView.data(gridData);
+          gridView.polygon().position('week*day*date').color('value', function (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_size,
+            grid_distance: grid_distance
+          }).shape('boundary-polygon').label(false).tooltip('date*value', function (date, value) {
+            return {
+              date: date,
+              value: getNumberDisplayString(value, columnData)
+            };
+          });
+          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 = function (text) {
+      var canvas = document.createElement('canvas');
+      var context = canvas.getContext('2d');
+      var font = context.font;
+      var fontStyle = font.slice(font.indexOf('px'));
+      font = 'bold ' + 12 + fontStyle;
+      context.font = font;
+      return Math.ceil(context.measureText(text).width);
+    };
+    _this.destroyChart = function () {
+      _this.chart.destroy();
+      _this.chart = null;
+    };
+    dayjs.locale('en');
+    _this.state = {
+      isCalculatingData: true,
+      showResultDescription: true
+    };
+    _this.calculateData = null;
+    _this.maxValue = 0;
+    return _this;
+  }
+  _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;
+          }
+        }
+      });
+      if (this.container) {
+        chartCalculator.calculate(statItem).then(function (data) {
+          var showResultDescription = data.years && data.years.length > 0 ? false : true;
+          _this2.calculateData = data;
+          _this2.setState({
+            isCalculatingData: false,
+            showResultDescription: showResultDescription
+          }, function () {
+            if (!showResultDescription) {
+              _this2.drawChart(data);
+              _this2.calculateData = 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;
+      }
+      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);
+        }
+      }
+    }
+  }, {
+    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,
+        marker: {
+          symbol: function symbol(x, y, r) {
+            return _this4.getLegendItemPath(x, y, r, 0, textWidth);
+          },
+          spacing: 0,
+          style: {
+            fill: '#E1E3E6',
+            lineWidth: 1,
+            stroke: '#EBEDF0',
+            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 && /*#__PURE__*/React.createElement("div", {
+        className: 'statistic-chart-loading-container'
+      }, /*#__PURE__*/React.createElement(Loading, null)), showResultDescription && /*#__PURE__*/React.createElement("div", {
+        className: 'statistic-chart-text'
+      }, intl.get(NO_STATISTIC_RESULTS)), /*#__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")
+      }));
+    }
+  }]);
+  return HeatMap;
+}(BaseChart);
+HeatMap.propTypes = {
+  isPreview: PropTypes.bool,
+  isEnlarge: PropTypes.bool,
+  theme: PropTypes.string,
+  statItem: PropTypes.object,
+  chartCalculator: PropTypes.object,
+  getTableById: PropTypes.func,
+  toggleStatisticRecordsDialog: PropTypes.func
+};
+export default HeatMap;