sea-chart 2.0.1 → 2.0.2

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

@@ -1,434 +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 _classnames = _interopRequireDefault(require("classnames"));
-var _dayjs = _interopRequireDefault(require("dayjs"));
-var _weekOfYear = _interopRequireDefault(require("dayjs/plugin/weekOfYear"));
-var _dtableUtils = require("dtable-utils");
-var _customG = require("../../utils/custom-g2");
-var _intl = _interopRequireDefault(require("../../intl"));
-var _utils = require("../../utils");
-var _constants = require("../../constants");
-var _style = require("../../constants/style");
-var _chartComponent = _interopRequireDefault(require("./chart-component"));
-_dayjs.default.extend(_weekOfYear.default);
-class HeatMap extends _chartComponent.default {
-  constructor(props) {
-    super(props);
-    this.createChart = () => {
-      const appendPadding = [30, 30, 0, 45];
-      // height for 1 year
-      const {
-        chart,
-        result
-      } = this.props;
-      const count = result.years.length;
-      let {
-        grid_size,
-        grid_distance
-      } = chart.config;
-      grid_size = grid_size || _constants.DEFAULT_GRID_SIZE;
-      grid_distance = grid_distance || _constants.DEFAULT_GRID_DISTANCE;
-      const yearHeight = grid_size * 7 + grid_distance * 6 + 8;
-      const height = (yearHeight + 30) * count + 30 + (count - 1) * 15;
-      const width = grid_size * 53 + grid_distance * 52 + 75; // 75: left padding + right padding
-      this.initChart(this.container, {
-        appendPadding,
-        autoFit: false,
-        height,
-        width
-      });
-      this.chart.on('element:click', e => {
-        const clickDate = e.data.data.date;
-        const statData = result.data.find(i => i.name === clickDate);
-        this.props.toggleRecords(statData);
-      });
-    };
-    this.transformData = statData => {
-      if (statData.length !== 0) {
-        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;
-      }
-      return [];
-    };
-    this.generateBackgroundGridData = statData => {
-      let currentDate = new Date(this.firstDate);
-      const year = currentDate.getFullYear();
-      const gridData = [];
-      const isLeapYear = year % 4 === 0 && (year % 100 !== 0 || year % 400 === 0);
-      const yearDayCount = isLeapYear ? 366 : 365;
-      const getISOWeek = date => {
-        const target = new Date(date.valueOf());
-        // set 0 to monday, 6 to sunday
-        const dayNumber = (date.getUTCDay() + 6) % 7;
-        // set target to Thursday of this week, daynumber is days passed this week, 3 is Thursday
-        target.setUTCDate(target.getUTCDate() - dayNumber + 3);
-        const firstThursday = target.valueOf();
-        target.setUTCMonth(0, 1);
-        // find first thursday of the year
-        // https://blog.csdn.net/theadore2017/article/details/88578753
-        if (target.getUTCDay() !== 4) {
-          target.setUTCMonth(0, 1 + (4 - target.getUTCDay() + 7) % 7);
-        }
-        return 1 + Math.ceil((firstThursday - target) / 604800000); // 604800000ms in one week
-      };
-      for (let i = 0; i < yearDayCount; i++) {
-        const day = currentDate.getDay();
-        let week = getISOWeek(currentDate) - 1;
-        const month = currentDate.getMonth();
-        if (week === 0 && month === 11) {
-          week = 52;
-        }
-        const yearDate = currentDate.toISOString().split('T')[0];
-        const value = statData[yearDate] || 0;
-        this.maxValue = Math.max(this.maxValue, value);
-        gridData.push({
-          date: yearDate,
-          value,
-          day,
-          week,
-          month
-        });
-        currentDate.setDate(currentDate.getDate() + 1);
-      }
-      return gridData;
-    };
-    // 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);
-    };
-    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 _intl.default.get(_constants.MONTH_MIRROR[month]);
-      }
-      return '';
-    };
-    this.drawChart = () => {
-      let {
-        result: data
-      } = this.props;
-      data = _utils.BaseUtils.formatEmptyName(data.data, '', _intl.default.get('Empty'));
-      if (!Array.isArray(data)) return;
-      this.draw(data);
-      this.renderAxisLabel(this.props.chart, this.props.tables);
-    };
-    this.draw = data => {
-      this.maxValue = 0;
-      const {
-        chart,
-        tables
-      } = this.props;
-      let {
-        data_color,
-        grid_size = _constants.DEFAULT_GRID_SIZE,
-        grid_distance = _constants.DEFAULT_GRID_DISTANCE,
-        table_id,
-        summary_type,
-        summary_column
-      } = chart.config;
-      const currentColorOption = _style.COLOR_OPTIONS.filter(item => item.name === data_color)[0] || _style.COLOR_OPTIONS[0];
-      const {
-        exampleColors
-      } = currentColorOption;
-      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">${_intl.default.get(_constants.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(data);
-      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 yearHeight = grid_size * 7 + grid_distance * 6 + 8;
-      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: [_intl.default.get('Sun'), _intl.default.get('Mon'), _intl.default.get('Tue'), _intl.default.get('Wed'), _intl.default.get('Thu'), _intl.default.get('Fri'), _intl.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: (0, _dtableUtils.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');
-      requestAnimationFrame(() => {
-        this.chart.render();
-      });
-    };
-    _dayjs.default.locale('en');
-    this.chart = null;
-    this.maxValue = 0;
-  }
-  componentDidMount() {
-    (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: _style.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;
-        }
-      }
-    });
-    this.createChart();
-    this.drawChart();
-  }
-  componentDidUpdate(prevProps) {
-    super.componentDidUpdate(prevProps);
-    if (_utils.BaseUtils.shouldChartComponentUpdate(prevProps, this.props)) {
-      var _this$chart;
-      ((_this$chart = this.chart) === null || _this$chart === void 0 ? void 0 : _this$chart.autoPadding) && this.chart.destroy();
-      this.createChart();
-      this.drawChart();
-    }
-  }
-  componentWillUnmount() {
-    var _this$chart2;
-    ((_this$chart2 = this.chart) === null || _this$chart2 === void 0 ? void 0 : _this$chart2.autoPadding) && this.chart.destroy();
-  }
-  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;
-  }
-  getLegendItems(colors) {
-    const text = _intl.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: _style.FILL_BORDER_COLOR_MAP[color],
-            r: 5
-          }
-        }
-      });
-    });
-    items[9].name = _intl.default.get('More');
-    items[9].marker.spacing = 22;
-    return items;
-  }
-  render() {
-    const {
-      chart
-    } = this.props;
-    return /*#__PURE__*/_react.default.createElement("div", {
-      className: (0, _classnames.default)('sea-chart-container w-100', {
-        'show-x-axis-label': this.isShowXAxisLabel(chart),
-        'show-y-axis-label': this.isShowYAxisLabel(chart)
-      }),
-      ref: ref => this.container = ref
-    });
-  }
-}
-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,
-  theme: _propTypes.default.object,
-  toggleRecords: _propTypes.default.func,
-  customRender: _propTypes.default.func
-};
-var _default = exports.default = HeatMap;

package/dist/view/wrapper/horizontal-bar-group.js

@@ -1,226 +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 _lodashEs = require("lodash-es");
-var _classnames = _interopRequireDefault(require("classnames"));
-var _constants = require("dtable-ui-component/lib/constants");
-var _constants2 = require("../../constants");
-var _utils = require("../../utils");
-var _intl = _interopRequireDefault(require("../../intl"));
-var _colorRules = require("../../constants/color-rules");
-var _columnUtils = require("../../utils/column-utils");
-var _horizontalComponent = _interopRequireDefault(require("./horizontal-component"));
-class HorizontalBarGroup extends _horizontalComponent.default {
-  constructor(props) {
-    super(props);
-    this.handleResize = (0, _lodashEs.debounce)(() => {
-      var _this$chart;
-      ((_this$chart = this.chart) === null || _this$chart === void 0 ? void 0 : _this$chart.autoPadding) && this.chart.destroy();
-      this.createChart();
-      this.drawChart();
-      this.renderHorizontalLabel(this.props.chart, this.props.tables);
-    }, 300);
-    this.createChart = () => {
-      const {
-        chart
-      } = this.props;
-      const {
-        display_data
-      } = chart.config;
-      this.chartTopPadding = display_data ? 17 : 0;
-      const appendPadding = [this.chartTopPadding, 30, 0, 0];
-      this.initChart(this.container, {
-        appendPadding
-      });
-      this.chart.on('interval:click', e => {
-        this.props.toggleRecords(e.data.data);
-      });
-    };
-    this.clearChart = () => {
-      this.chart.annotation().clear(true);
-      this.chart.clear(true);
-    };
-    this.drawChart = () => {
-      let {
-        result: data,
-        customRender,
-        chart
-      } = this.props;
-      data = _utils.BaseUtils.formatEmptyName(data, '', _intl.default.get('Empty'));
-      if (!Array.isArray(data)) return;
-      this.chart.scale(this.groupName, {
-        type: 'cat'
-      });
-      const {
-        sort_type,
-        type
-      } = chart.config;
-      if (type === _constants2.CHART_TYPE.STACKED_HORIZONTAL_BAR && sort_type) {
-        data = (0, _columnUtils.sortDataByGroupSum)(data, sort_type);
-      }
-      this.loadData(data);
-      this.draw(data);
-      (0, _utils.isFunction)(customRender) && customRender(this.chart);
-      requestAnimationFrame(() => {
-        this.chart.render();
-      });
-    };
-    this.draw = data => {
-      const {
-        chart,
-        summaryColumn,
-        globalTheme,
-        chartColorTheme,
-        tables
-      } = this.props;
-      const theme = _constants2.CHART_THEME_COLOR[globalTheme];
-      const {
-        horizontal_axis_summary_method,
-        display_data,
-        label_font_size,
-        type,
-        column_groupby_column_key,
-        table_id,
-        color_theme
-      } = chart.config;
-      const isGroup = type === _constants2.CHART_TYPE.HORIZONTAL_GROUP_BAR;
-      const groupByColumn = this.getColumn(tables, table_id, column_groupby_column_key);
-      const useSingleSelectColumnColor = (groupByColumn === null || groupByColumn === void 0 ? void 0 : groupByColumn.type) === _constants.CellType.SINGLE_SELECT && color_theme === _colorRules.SUPPORT_SINGLE_SELECT_THEMES_OPTIONS.SINGLE_SELECT_COLUMN_COLORS;
-      const newData = this.getChartGroupData(data);
-      let singleBarWidth, singleBarRadius;
-      // y-axis label width：(6 + 10)
-      // topPadding and legend height
-      const chartHeight = this.chart.height - 6 - 10 - this.chartTopPadding - 30;
-      if (!isGroup) {
-        singleBarWidth = Math.round(chartHeight / (2 * newData.length));
-        this.markFirstOrLast(data, 'last');
-      } else {
-        // stacked chart
-        const maxCountGroup = (0, _lodashEs.maxBy)(newData, 'currentGroupCount');
-        // calculate the width of each bar in a mostCommonCountGroup
-        singleBarWidth = Math.round(chartHeight / (2 * newData.length * maxCountGroup.currentGroupCount));
-      }
-      singleBarRadius = Math.min(singleBarWidth / 5, 10);
-      this.drawLabels(newData);
-      // set Coord type
-      this.chart.coordinate('rect');
-      this.autoAdjustDataOptions(chart, data, summaryColumn);
-      const adjust = !isGroup ? {
-        type: 'stack'
-      } : {
-        type: 'dodge',
-        marginRatio: 0
-      };
-
-      // use single select column color
-      useSingleSelectColumnColor ? this.setSingleSelectColorMap(data) : this.setColorMap(data, chartColorTheme);
-      this.chart.interval().animate({
-        // custom update animation
-        update: {
-          animation: 'fadeIn',
-          duration: 1000,
-          easing: 'easeLinear'
-        }
-      }).label(display_data ? 'value' : false, {
-        style: {
-          fontSize: _utils.BaseUtils.getLabelFontSize(label_font_size),
-          fill: theme.labelColor,
-          ...this.labelStroke
-        }
-      }).position('name*value').size(singleBarWidth).color('group_name', group_name => {
-        return this.colorMap[group_name] || _constants2.CHART_STYLE_COLORS[0];
-      }).tooltip('name*value*group_name*raw_name', (name, value, group_name, raw_name) => {
-        return {
-          title: !name && typeof name !== 'number' ? _intl.default.get(_constants2.EMPTY_NAME) : name,
-          value: _utils.BaseUtils.getSummaryValueDisplayString(summaryColumn, value, horizontal_axis_summary_method),
-          name: !group_name && typeof group_name !== 'number' ? _intl.default.get(_constants2.EMPTY_NAME) : group_name
-        };
-      }).adjust([adjust]).state({
-        active: {
-          style: {
-            stroke: null
-          }
-        }
-      }).style('isLast', isLast => {
-        if (adjust.type === 'stack') {
-          if (isLast) {
-            return {
-              radius: [singleBarRadius, singleBarRadius, 0, 0]
-            };
-          } else {
-            return {
-              radius: [0, 0, 0, 0]
-            };
-          }
-        } else {
-          return {
-            radius: [singleBarRadius, singleBarRadius, 0, 0]
-          };
-        }
-      });
-      if (isGroup) {
-        this.formatDataByName(data);
-      }
-      this.setToolTip(isGroup, summaryColumn, horizontal_axis_summary_method);
-      this.setNameLabelAndTooltip(theme, this.labelCount);
-      this.setValueLabel(theme);
-      this.chart.coordinate().transpose();
-      this.setLegend('group_name', theme, 'top-right');
-      this.chart.interaction('element-highlight-by-x');
-    };
-    this.chart = null;
-  }
-  componentDidMount() {
-    this.createChart();
-    this.drawChart();
-    this.renderHorizontalLabel(this.props.chart, this.props.tables);
-    window.addEventListener('resize', this.handleResize);
-  }
-  componentDidUpdate(prevProps) {
-    super.componentDidUpdate(prevProps);
-    if (_utils.BaseUtils.shouldChartComponentUpdate(prevProps, this.props)) {
-      var _this$chart2;
-      ((_this$chart2 = this.chart) === null || _this$chart2 === void 0 ? void 0 : _this$chart2.autoPadding) && this.chart.destroy();
-      this.createChart();
-      this.drawChart();
-      this.renderHorizontalLabel(prevProps.chart, prevProps.tables);
-    }
-  }
-  componentWillUnmount() {
-    var _this$chart3;
-    ((_this$chart3 = this.chart) === null || _this$chart3 === void 0 ? void 0 : _this$chart3.autoPadding) && this.chart.destroy();
-    window.removeEventListener('resize', this.handleResize);
-  }
-  render() {
-    const {
-      chart
-    } = this.props;
-    return /*#__PURE__*/_react.default.createElement("div", {
-      className: (0, _classnames.default)('sea-chart-container', {
-        'show-x-axis-label': this.isShowXAxisLabel(chart),
-        'show-y-axis-label': this.isShowYAxisLabel(chart)
-      }),
-      ref: ref => this.container = ref
-    });
-  }
-}
-HorizontalBarGroup.propTypes = {
-  canvasStyle: _propTypes.default.object,
-  chart: _propTypes.default.object,
-  groupbyColumn: _propTypes.default.object,
-  columnGroupbyColumn: _propTypes.default.object,
-  summaryColumn: _propTypes.default.object,
-  result: _propTypes.default.array,
-  tables: _propTypes.default.array,
-  globalTheme: _propTypes.default.string,
-  chartColorTheme: _propTypes.default.string,
-  toggleRecords: _propTypes.default.func,
-  customRender: _propTypes.default.func
-};
-var _default = exports.default = HorizontalBarGroup;