dtable-statistic 4.4.24 → 5.0.0-alpha.0

package/es/stat-view/combination-chart.js

@@ -1,546 +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 _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");
-const propTypes = {
-  isPreview: _propTypes.default.bool,
-  isEdit: _propTypes.default.bool,
-  theme: _propTypes.default.string,
-  colorThemeName: _propTypes.default.string,
-  statItem: _propTypes.default.object,
-  chartCalculator: _propTypes.default.object,
-  eventBus: _propTypes.default.object,
-  getTableById: _propTypes.default.func,
-  toggleStatisticRecordsDialog: _propTypes.default.func
-};
-class CombinationChart extends _baseChart.default {
-  constructor(props) {
-    super(props);
-    this.renderAxisLabel = newStatItem => {
-      let {
-        getTableById,
-        statItem
-      } = this.props;
-      if (newStatItem && newStatItem._id !== statItem._id) {
-        return;
-      }
-      if (!this.chart) return;
-      statItem = newStatItem || statItem;
-      const {
-        table_id,
-        x_axis_column_key,
-        show_y_axis_left_label,
-        show_y_axis_right_label,
-        show_x_axis_label,
-        y_axis_left_label_position,
-        y_axis_right_label_position,
-        y_axis_left_summary_column,
-        y_axis_right_summary_column,
-        x_axis_label_position,
-        y_axis_left_summary_method,
-        y_axis_right_summary_method
-      } = statItem;
-      const table = getTableById(table_id);
-      const autoPadding = this.chart.autoPadding;
-      const themeColors = this.getThemeColors();
-      const xAxisID = "chart-x-axis-label_".concat(statItem._id);
-      const chartContainer = this.chart.getCanvas().get('container');
-      const xLabel = chartContainer.querySelector("#".concat(xAxisID));
-      if (!xLabel && show_x_axis_label) {
-        const div = document.createElement('div');
-        div.id = xAxisID;
-        div.className = 'statistic-chart-axis-label';
-        const column = (0, _dtableUtils.getTableColumnByKey)(table, x_axis_column_key);
-        div.innerHTML = "".concat(column ? column.name : '');
-        div.setAttribute('style', "color:".concat(themeColors.textColor, "; width: 100%; padding-left: ").concat(autoPadding.left, "px; text-align: ").concat(x_axis_label_position, "; bottom: -20px"));
-        chartContainer.appendChild(div);
-      }
-      if (xLabel && show_x_axis_label) {
-        xLabel.setAttribute('style', "color:".concat(themeColors.textColor, "; width: 100%; padding-left: ").concat(autoPadding.left, "px; text-align: ").concat(x_axis_label_position, "; bottom: -20px"));
-      }
-      if (xLabel && !show_x_axis_label) {
-        xLabel.parentNode.removeChild(xLabel);
-      }
-      const yAxisLeftID = "chart-y-axis-left-label_".concat(statItem._id);
-      const yAxisLeftLabel = chartContainer.querySelector("#".concat(yAxisLeftID));
-      if (!yAxisLeftLabel && show_y_axis_left_label) {
-        const div = document.createElement('div');
-        div.id = yAxisLeftID;
-        div.className = 'statistic-chart-axis-label';
-        const yAxisColumn = (0, _dtableUtils.getTableColumnByKey)(table, y_axis_left_summary_column);
-        const labeContent = yAxisColumn ? _reactIntlUniversal.default.get(_constants.STATISTICS_COUNT_SHOW[y_axis_left_summary_method]) : _reactIntlUniversal.default.get(_constants.STATISTICS_COUNT_SHOW.count);
-        div.innerHTML = labeContent;
-        const containerHeight = chartContainer.offsetHeight;
-        let textAlign = 'center';
-        if (y_axis_left_label_position === 'bottom') textAlign = 'left';
-        if (y_axis_left_label_position === 'top') textAlign = 'right';
-        div.setAttribute('style', "color:".concat(themeColors.textColor, "; position: absolute; width: ").concat(containerHeight, "px; padding-left: ").concat(autoPadding.bottom, "px; text-align: ").concat(textAlign, "; top: 0; left: 0px; transform: translate(-").concat(containerHeight / 2 + 12, "px, ").concat((containerHeight - autoPadding.bottom) / 2 - 6, "px) rotate(-90deg)"));
-        chartContainer.appendChild(div);
-      }
-      if (yAxisLeftLabel && show_y_axis_left_label) {
-        const containerHeight = chartContainer.offsetHeight;
-        let textAlign = 'center';
-        if (y_axis_left_label_position === 'bottom') textAlign = 'left';
-        if (y_axis_left_label_position === 'top') textAlign = 'right';
-        yAxisLeftLabel.setAttribute('style', "color:".concat(themeColors.textColor, "; position: absolute; width: ").concat(containerHeight, "px; padding-left: ").concat(autoPadding.bottom, "px; text-align: ").concat(textAlign, "; top: 0; left: 0px; transform: translate(-").concat(containerHeight / 2 + 12, "px, ").concat((containerHeight - autoPadding.bottom) / 2 - 6, "px) rotate(-90deg)"));
-      }
-      if (yAxisLeftLabel && !show_y_axis_left_label) {
-        yAxisLeftLabel.parentNode.removeChild(yAxisLeftLabel);
-      }
-      const yAxisRightID = "chart-y-axis-right-label_".concat(statItem._id);
-      const yAxisRightLabel = chartContainer.querySelector("#".concat(yAxisRightID));
-      if (!yAxisRightLabel && show_y_axis_right_label) {
-        const div = document.createElement('div');
-        div.id = yAxisRightID;
-        div.className = 'statistic-chart-axis-label';
-        const yAxisColumn = (0, _dtableUtils.getTableColumnByKey)(table, y_axis_right_summary_column);
-        const labeContent = yAxisColumn ? _reactIntlUniversal.default.get(_constants.STATISTICS_COUNT_SHOW[y_axis_right_summary_method]) : _reactIntlUniversal.default.get(_constants.STATISTICS_COUNT_SHOW.count);
-        div.innerHTML = labeContent;
-        const containerHeight = chartContainer.offsetHeight;
-        let textAlign = 'center';
-        if (y_axis_right_label_position === 'bottom') textAlign = 'right';
-        if (y_axis_right_label_position === 'top') textAlign = 'left';
-        div.setAttribute('style', "color:".concat(themeColors.textColor, "; position: absolute; width: ").concat(containerHeight, "px; padding-right: ").concat(autoPadding.bottom, "px; text-align: ").concat(textAlign, "; top: 0; right: 0px; transform: translate(").concat(containerHeight / 2 + 12, "px, ").concat((containerHeight - autoPadding.bottom) / 2 - 6, "px) rotate(-270deg)"));
-        chartContainer.appendChild(div);
-      }
-      if (yAxisRightLabel && show_y_axis_right_label) {
-        const containerHeight = chartContainer.offsetHeight;
-        let textAlign = 'center';
-        if (y_axis_right_label_position === 'bottom') textAlign = 'right';
-        if (y_axis_right_label_position === 'top') textAlign = 'left';
-        yAxisRightLabel.setAttribute('style', "color:".concat(themeColors.textColor, "; position: absolute; width: ").concat(containerHeight, "px; padding-right: ").concat(autoPadding.bottom, "px; text-align: ").concat(textAlign, "; top: 0; right: 0px; transform: translate(").concat(containerHeight / 2 + 12, "px, ").concat((containerHeight - autoPadding.bottom) / 2 - 6, "px) rotate(-270deg)"));
-      }
-      if (yAxisRightLabel && !show_y_axis_right_label) {
-        yAxisRightLabel.parentNode.removeChild(yAxisRightLabel);
-      }
-    };
-    this.drawChart = data => {
-      const {
-        getTableById,
-        statItem,
-        colorThemeName
-      } = this.props;
-      const {
-        table_id,
-        y_axis_left_summary_column,
-        y_axis_right_summary_column
-      } = statItem;
-      this.initChartHandler();
-      this.chart.data(data);
-      this.chart.coordinate('rect');
-      this.chart.on('element:click', e => {
-        if (e.data.data) {
-          this.props.toggleStatisticRecordsDialog(e.data.data, statItem);
-        }
-      });
-      const table = getTableById(table_id);
-      const leftColumn = (0, _dtableUtils.getTableColumnByKey)(table, y_axis_left_summary_column) || {};
-      const rightColumn = (0, _dtableUtils.getTableColumnByKey)(table, y_axis_right_summary_column) || {};
-      this.handleAutoRange(leftColumn, rightColumn);
-      const themeColors = this.getThemeColors();
-      const currentTheme = (0, _commonUtils.getCurrentTheme)(colorThemeName);
-      this.setNameAxis(themeColors);
-      this.setValueAxis(themeColors);
-      this.setLegend(themeColors, table, currentTheme);
-      this.drawLeft({
-        currentTheme
-      });
-      this.drawRight({
-        currentTheme,
-        themeColors
-      });
-      this.chart.removeInteraction('legend-filter');
-      this.chart.render();
-      this.renderAxisLabel();
-    };
-    this.initChartHandler = () => {
-      const {
-        isPreview,
-        statItem
-      } = this.props;
-      const {
-        display_data
-      } = statItem;
-      let config = {
-        container: this.container,
-        autoFit: true,
-        appendPadding: [display_data ? 20 : 3, 0, 0, 0]
-      };
-      if (!isPreview) {
-        config.height = 400;
-        config.width = 700;
-      }
-      this.chart = new _customG.Chart(config);
-    };
-    this.handleAutoRange = (leftColumn, rightColumn) => {
-      const {
-        statItem
-      } = this.props;
-      const {
-        y_axis_left_summary_method,
-        y_axis_right_summary_method,
-        y_axis_auto_range_left = true,
-        y_axis_min_left = 0,
-        y_axis_max_left = 0,
-        y_axis_auto_range_right = true,
-        y_axis_min_right = 0,
-        y_axis_max_right = 0
-      } = statItem;
-      const leftColumnData = leftColumn.data || _constants.DEFAULT_NUMBER_FORMAT_OBJECT;
-      const rightColumnData = rightColumn.data || _constants.DEFAULT_NUMBER_FORMAT_OBJECT;
-      let leftValueScaleOptions = {
-        formatter: value => {
-          return this.getNumberDisplayString(value, leftColumnData, y_axis_left_summary_method);
-        }
-      };
-      let rightValueScaleOptions = {
-        formatter: value => {
-          return this.getNumberDisplayString(value, rightColumnData, y_axis_right_summary_method);
-        }
-      };
-      if (!y_axis_auto_range_left) {
-        leftValueScaleOptions = Object.assign(leftValueScaleOptions, {
-          min: y_axis_min_left,
-          max: y_axis_max_left
-        });
-      }
-      if (!y_axis_auto_range_right) {
-        rightValueScaleOptions = Object.assign(rightValueScaleOptions, {
-          min: y_axis_min_right,
-          max: y_axis_max_right
-        });
-      }
-      this.chart.scale({
-        name: {
-          type: 'cat'
-        },
-        // Automatic adjustment of maximum and minimum values
-        // Automatic adjustment of maximum and minimum values
-        value_left: leftValueScaleOptions,
-        value_right: rightValueScaleOptions
-      });
-    };
-    this.setNameAxis = themeColors => {
-      this.chart.axis('name', {
-        label: {
-          style: {
-            fill: themeColors.textColor
-          },
-          formatter: name => {
-            if (name === '' || name === null || name === undefined) {
-              return _reactIntlUniversal.default.get(_constants.EMPTY_NAME);
-            }
-            return name;
-          }
-        },
-        line: {
-          style: themeColors.gridColor
-        }
-      });
-    };
-    this.setValueAxis = themeColors => {
-      this.chart.axis('value_left', {
-        grid: {
-          line: {
-            style: {
-              stroke: themeColors.gridColor
-            }
-          }
-        },
-        label: {
-          style: {
-            fill: themeColors.textColor
-          }
-        }
-      });
-      this.chart.axis('value_right', {
-        grid: null,
-        label: {
-          style: {
-            fill: themeColors.textColor
-          }
-        }
-      });
-    };
-    this.setLegend = (themeColors, table, currentTheme) => {
-      let legendPosition = 'bottom';
-      this.chart.legend({
-        custom: true,
-        position: legendPosition,
-        itemName: {
-          style: {
-            fill: themeColors.textColor
-          }
-        },
-        items: this.getLegend(table, currentTheme)
-      });
-    };
-    this.drawLeft = _ref => {
-      let {
-        currentTheme
-      } = _ref;
-      const {
-        statItem
-      } = this.props;
-      const {
-        y_axis_left_summary_method,
-        y_axis_left_summary_type,
-        y_axis_left_group_by_multiple_numeric_column
-      } = statItem;
-      this.chart.interval().position('name*value_left').color('color', color => {
-        if (!y_axis_left_group_by_multiple_numeric_column) {
-          return currentTheme && currentTheme.colors[0];
-        }
-        return color;
-      }).adjust('dodge').tooltip('name*formatted_value_left', (name, value) => {
-        return {
-          value,
-          title: y_axis_left_summary_type === _constants.SUMMARY_TYPE.COUNT ? _reactIntlUniversal.default.get(_constants.TITLE_AMOUNT) : _reactIntlUniversal.default.get(_constants.STATISTICS_COUNT_SHOW[y_axis_left_summary_method]),
-          name: !name && typeof name !== 'number' ? _reactIntlUniversal.default.get(_constants.EMPTY_NAME) : name
-        };
-      });
-      this.chart.tooltip({
-        showMarkers: false
-      });
-    };
-    this.drawRight = _ref2 => {
-      let {
-        currentTheme,
-        themeColors
-      } = _ref2;
-      const {
-        statItem
-      } = this.props;
-      const {
-        y_axis_right_summary_type,
-        y_axis_right_summary_method,
-        display_data = false
-      } = statItem;
-
-      // line
-      this.chart.line().position('name*value_right').color(currentTheme && currentTheme.colors[1]).size(3).tooltip('name*formatted_value_right', (name, value) => {
-        return {
-          value,
-          title: y_axis_right_summary_type === _constants.SUMMARY_TYPE.COUNT ? _reactIntlUniversal.default.get(_constants.TITLE_AMOUNT) : _reactIntlUniversal.default.get(_constants.STATISTICS_COUNT_SHOW[y_axis_right_summary_method]),
-          name: !name && typeof name !== 'number' ? _reactIntlUniversal.default.get(_constants.EMPTY_NAME) : name
-        };
-      });
-
-      // point on the line
-      this.chart.point().position('name*value_right').color(currentTheme && currentTheme.colors[1]).size(3).shape('circle').label(display_data ? 'formatted_value_right' : false, {
-        style: {
-          fontSize: this.getLabelFontSize(),
-          fill: themeColors.textColor
-        }
-      }).tooltip('name*formatted_value_right', (name, value) => {
-        return {
-          value,
-          title: y_axis_right_summary_type === _constants.SUMMARY_TYPE.COUNT ? _reactIntlUniversal.default.get(_constants.TITLE_AMOUNT) : _reactIntlUniversal.default.get(_constants.STATISTICS_COUNT_SHOW[y_axis_right_summary_method]),
-          name: !name && typeof name !== 'number' ? _reactIntlUniversal.default.get(_constants.EMPTY_NAME) : name
-        };
-      });
-    };
-    this.getLegend = (table, colorTheme) => {
-      const {
-        statItem
-      } = this.props;
-      const {
-        y_axis_left_group_by_multiple_numeric_column,
-        y_axis_left_summary_column,
-        y_axis_right_summary_column,
-        y_axis_left_group_by_numeric_columns
-      } = statItem;
-      const legendItems = [];
-      const column1 = (0, _dtableUtils.getTableColumnByKey)(table, y_axis_left_summary_column) || {};
-      const column2 = (0, _dtableUtils.getTableColumnByKey)(table, y_axis_right_summary_column) || {};
-      if (!y_axis_left_group_by_multiple_numeric_column) {
-        legendItems.push({
-          value: 'value_left',
-          name: column1.name || _reactIntlUniversal.default.get(_constants.LEGEND_LEFT),
-          marker: {
-            symbol: 'square',
-            style: {
-              fill: colorTheme && colorTheme.colors[0],
-              r: 5
-            }
-          }
-        }, {
-          value: 'value_right',
-          name: column2.name || _reactIntlUniversal.default.get(_constants.LEGEND_RIGHT),
-          marker: {
-            symbol: 'hyphen',
-            style: {
-              stroke: colorTheme && colorTheme.colors[1],
-              r: 5,
-              lineWidth: 3
-            }
-          }
-        });
-      } else {
-        legendItems.push({
-          value: 'value_left',
-          name: column1.name || _reactIntlUniversal.default.get(_constants.LEGEND_LEFT),
-          marker: {
-            fill: _constants.LABEL_COLORS[0],
-            symbol: 'square',
-            style: {
-              r: 5
-            }
-          }
-        });
-        y_axis_left_group_by_numeric_columns.forEach((item, index) => {
-          const column = (0, _dtableUtils.getTableColumnByKey)(table, item.column_key) || {};
-          legendItems.push({
-            value: 'group_name',
-            name: column.name || _reactIntlUniversal.default.get(_constants.LEGEND_LEFT),
-            marker: {
-              symbol: 'square',
-              style: {
-                fill: _constants.LABEL_COLORS[(index + 1) % 12],
-                r: 5
-              }
-            }
-          });
-        });
-        legendItems.push({
-          value: 'value_right',
-          name: column2.name || _reactIntlUniversal.default.get(_constants.LEGEND_RIGHT),
-          marker: {
-            symbol: 'hyphen',
-            style: {
-              stroke: colorTheme && colorTheme.colors[1],
-              r: 5,
-              lineWidth: 3
-            }
-          }
-        });
-      }
-      return legendItems;
-    };
-    this.destroyChart = () => {
-      this.chart.destroy();
-      this.chart = null;
-    };
-    this.state = {
-      isCalculatingData: true,
-      showResultDescription: true
-    };
-    this.calculateData = null;
-  }
-  async componentDidMount() {
-    const {
-      statItem,
-      chartCalculator,
-      eventBus
-    } = this.props;
-    this.unsubscribeStyleChange = eventBus.subscribe(_constants.LABEL_CONFIG_CHANGED, newStatItem => {
-      this.renderAxisLabel(newStatItem);
-    });
-    if (!this.container) return;
-    const data = await chartCalculator.calculate(statItem);
-    let showResultDescription = data.length > 0 ? false : true;
-    this.setState({
-      isCalculatingData: false,
-      showResultDescription
-    }, () => {
-      if (!showResultDescription) {
-        this.drawChart(data);
-        this.calculateData = data;
-      }
-    });
-  }
-  shouldComponentUpdate(nextProps, nextState) {
-    const {
-      theme,
-      colorThemeName
-    } = this.props;
-    if (this.canUpdate(this.props, nextProps)) {
-      return true;
-    }
-    if (nextState.isCalculatingData !== this.state.isCalculatingData) {
-      return true;
-    }
-    if (nextProps.theme !== theme) {
-      return true;
-    }
-    if (nextProps.colorThemeName !== colorThemeName) {
-      return true;
-    }
-    return false;
-  }
-  async 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) {
-        const data = await chartCalculator.calculate(statItem);
-        const showResultDescription = data.length > 0 ? false : true;
-        this.chart && this.destroyChart();
-        this.calculateData = data;
-        this.setState({
-          isCalculatingData: false,
-          showResultDescription
-        }, () => {
-          if (!showResultDescription) {
-            this.drawChart(data);
-            if (this.props.isPreview) this.chart.forceFit();
-          }
-        });
-      }
-    } else {
-      if (!this.state.showResultDescription) {
-        this.chart && this.destroyChart();
-        this.drawChart(this.calculateData);
-        if (this.props.isPreview) {
-          this.chart.forceFit();
-        }
-      }
-    }
-  }
-  componentWillUnmount() {
-    this.container = null;
-    this.unsubscribeStyleChange();
-  }
-  render() {
-    const {
-      statItem
-    } = this.props;
-    const {
-      isCalculatingData,
-      showResultDescription
-    } = this.state;
-    const {
-      show_y_axis_left_label,
-      show_x_axis_label
-    } = statItem;
-    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, isCalculatingData && this.renderLoading(), showResultDescription && this.renderEmpty(), /*#__PURE__*/_react.default.createElement("div", {
-      ref: ref => this.container = ref,
-      style: {
-        padding: show_y_axis_left_label || show_x_axis_label ? 30 : 20
-      },
-      className: "statistic-chart-container"
-    }));
-  }
-}
-CombinationChart.propTypes = propTypes;
-var _default = exports.default = CombinationChart;