dtable-statistic 4.4.23 → 4.4.24-alpha.1

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

@@ -1,392 +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");
-var _statisticChartModule = _interopRequireDefault(require("../assets/css/statistic-chart.module.css"));
-const propTypes = {
-  isPreview: _propTypes.default.bool,
-  colorThemeName: _propTypes.default.string,
-  statItem: _propTypes.default.object,
-  chartCalculator: _propTypes.default.object,
-  toggleStatisticRecordsDialog: _propTypes.default.func
-};
-class RingChart extends _baseChart.default {
-  constructor(props) {
-    super(props);
-    this.drawChart = data => {
-      const {
-        isPreview,
-        statItem
-      } = this.props;
-      if (isPreview) {
-        this.chart = new _customG.Chart({
-          container: this.container,
-          autoFit: true,
-          padding: [20, 0]
-        });
-      } else {
-        this.chart = new _customG.Chart({
-          container: this.container,
-          autoFit: true,
-          height: 400,
-          width: 700
-        });
-      }
-      this.chart.on('element:click', e => {
-        const clickData = e.data.data;
-        if (clickData.name !== 'Others') {
-          this.props.toggleStatisticRecordsDialog(e.data.data, statItem);
-        }
-      });
-      this.drawRingChart(data, !isPreview);
-      this.chart.render();
-    };
-    this.drawRingChart = (data, isCreating) => {
-      this.sum = data.total;
-      if (data.length === 0) return;
-      let {
-        getTableById,
-        statItem,
-        colorThemeName
-      } = this.props;
-      let summaryColumn = null;
-      let summaryColumnData = _constants.DEFAULT_NUMBER_FORMAT_OBJECT;
-      const {
-        summary_type,
-        summary_method,
-        summary_column_key,
-        table_id,
-        show_legend,
-        show_percent,
-        display_label,
-        label_position,
-        display_annotation
-      } = statItem;
-      const table = getTableById(table_id);
-      if (summary_type !== _constants.SUMMARY_TYPE.COUNT) {
-        summaryColumn = summary_column_key && (0, _dtableUtils.getTableColumnByKey)(table, summary_column_key);
-        summaryColumnData = summaryColumn && summaryColumn.data || _constants.DEFAULT_NUMBER_FORMAT_OBJECT;
-      }
-      this.chart.coordinate('theta', {
-        radius: isCreating ? 0.75 : 0.95,
-        innerRadius: isCreating ? 0.6 : 0.7
-      });
-      const currentTheme = (0, _commonUtils.getCurrentTheme)(colorThemeName);
-      const themeColors = this.getThemeColors();
-      const newData = (0, _commonUtils.formatPieChartData)(data, statItem, table, currentTheme);
-      this.chart.data(newData, {
-        'name': {
-          type: 'cat',
-          nice: false
-        }
-      });
-      const colorSet = newData.colorSet;
-      this.sum = newData.total;
-      if (show_legend) {
-        this.chart.legend('name', {
-          position: 'right',
-          custom: true,
-          pageNavigator: {
-            text: {
-              style: {
-                fill: themeColors.textColor
-              }
-            },
-            marker: {
-              style: {
-                fill: themeColors.legendPageNavigatorMarkerColor,
-                inactiveFill: themeColors.legendPageNavigatorMarkerColor,
-                inactiveOpacity: 0.45
-              }
-            }
-          },
-          itemName: {
-            style: {
-              fill: themeColors.textColor
-            }
-          },
-          items: newData.map((obj, index) => {
-            const sIndex = String(index);
-            const colorIndex = sIndex.charAt(sIndex.length - 1);
-            let name = obj.name;
-            if (!obj.name && typeof obj.name !== 'number') {
-              name = _reactIntlUniversal.default.get(_constants.EMPTY_NAME);
-            } else if (obj.name === 'Others') {
-              name = _reactIntlUniversal.default.get('Others');
-            }
-            return {
-              name,
-              value: obj.value,
-              marker: {
-                symbol: 'circle',
-                style: {
-                  r: 5,
-                  fill: colorSet[colorIndex]
-                }
-              }
-            };
-          })
-        });
-      } else {
-        this.chart.legend(false);
-      }
-
-      // Do not automatically adjust the maximum and minimum values in ring chart
-      this.chart.scale({
-        value: {
-          nice: false
-        }
-      });
-      this.chart.interval().adjust('stack').position('value').color('name', colorSet).label('formatted_value*percent', (value, percent) => {
-        return {
-          content: this.getLabel(value, percent)
-        };
-      }, {
-        offset: !label_position || label_position === _constants.LABEL_POSITIONS[0] ? isCreating ? -10 : -2 : undefined,
-        style: {
-          fill: themeColors.labelColor,
-          fontSize: this.getLabelFontSize(),
-          shadowBlur: 2,
-          shadowColor: 'rgba(0, 0, 0, .45)'
-        }
-      }).tooltip('name*formatted_value*percent', (name, value, percent) => {
-        let title = name;
-        if (!name || name === 'undefined') {
-          title = _reactIntlUniversal.default.get(_constants.EMPTY_NAME);
-        }
-        return show_percent || display_label ? {
-          name: title,
-          value: this.getLabel(value, percent)
-        } : {
-          name: title,
-          value
-        };
-      }).state({
-        active: {
-          style: {
-            fillOpacity: 0.7,
-            border: 'none',
-            stroke: 0
-          }
-        }
-      });
-      this.chart.tooltip({
-        showTitle: false,
-        showMarkers: false,
-        itemTpl: '<div class="g2-tooltip-list-item"><span style="background-color:{color};" class="g2-tooltip-marker"></span>{name}: {value}</div>'
-      });
-      this.chart.interaction('element-active');
-      if (display_annotation === undefined || display_annotation === null || display_annotation) {
-        this.setAnnotation({
-          name: _reactIntlUniversal.default.get(_constants.TITLE_TOTAL),
-          value: summaryColumn ? this.getNumberDisplayString(this.sum, summaryColumnData, summary_method) : this.sum
-        }, themeColors.labelColor);
-        this.chart.on('interval:mouseenter', evt => this.onEnterRingChart(evt, themeColors.labelColor, summaryColumn, summaryColumnData));
-        this.chart.on('interval:mouseleave', evt => this.onLeaveRingChart(evt, themeColors.labelColor, summaryColumn, summaryColumnData));
-      }
-    };
-    this.getLabel = (value, percent) => {
-      const {
-        show_percent,
-        display_label,
-        label_format
-      } = this.props.statItem;
-      let content;
-      if (show_percent) {
-        content = percent;
-        return content;
-      } else {
-        if (!display_label) {
-          content = '';
-          return content;
-        }
-      }
-      switch (label_format) {
-        case _constants.LABEL_FORMATS[0]:
-          content = percent;
-          break;
-        case _constants.LABEL_FORMATS[1]:
-          content = value;
-          break;
-        case _constants.LABEL_FORMATS[2]:
-          content = "".concat(value, " (").concat(percent, ")");
-          break;
-        default:
-          content = percent;
-      }
-      return content;
-    };
-    this.getAnnotationFontSize = () => {
-      const {
-        statItem
-      } = this.props;
-      const {
-        annotation_font_size
-      } = statItem;
-      const mainFontSize = annotation_font_size || _constants.DEFAULT_ANNOTATION_SIZE;
-      const subFontSize = Math.max(mainFontSize - 12, 12);
-      return {
-        mainFontSize,
-        subFontSize
-      };
-    };
-    this.setAnnotation = (content, fontColor, summaryColumn, summaryColumnData) => {
-      const {
-        summary_method
-      } = this.props.statItem;
-      let name = content.name;
-      if (!name || name === 'undefined') {
-        name = _reactIntlUniversal.default.get(_constants.EMPTY_NAME);
-      } else if (name === 'Others') {
-        name = _reactIntlUniversal.default.get('Others');
-      }
-      const {
-        mainFontSize,
-        subFontSize
-      } = this.getAnnotationFontSize();
-      this.chart.annotation().text({
-        content: name,
-        position: ['50%', '50%'],
-        style: {
-          fontSize: subFontSize,
-          fill: fontColor,
-          fontWeight: '300',
-          textAlign: 'center'
-        },
-        offsetY: -20
-      }).text({
-        position: ['50%', '50%'],
-        content: summaryColumn ? this.getNumberDisplayString(content.value, summaryColumnData, summary_method) : content.value,
-        style: {
-          fontSize: mainFontSize,
-          fill: fontColor,
-          textAlign: 'center'
-        },
-        offsetY: 20
-      });
-    };
-    this.onEnterRingChart = (ev, color, summaryColumn, summaryColumnData) => {
-      const item = ev.data.data;
-      this.chart.annotation().clear(true);
-      this.setAnnotation(item, color, summaryColumn, summaryColumnData);
-      this.chart.render(true);
-    };
-    this.onLeaveRingChart = (ev, color, summaryColumn, summaryColumnData) => {
-      this.chart.annotation().clear(true);
-      this.setAnnotation({
-        name: _reactIntlUniversal.default.get(_constants.TITLE_TOTAL),
-        value: this.sum
-      }, color, summaryColumn, summaryColumnData);
-      this.chart.render(true);
-    };
-    this.destroyChart = () => {
-      this.chart.destroy();
-      this.chart = null;
-    };
-    this.state = {
-      isCalculatingData: true,
-      showResultDescription: true
-    };
-    this.calculateData = null;
-  }
-  componentDidMount() {
-    const {
-      statItem,
-      chartCalculator
-    } = this.props;
-    if (this.container) {
-      chartCalculator.calculate(statItem).then(data => {
-        const showResultDescription = data.length > 0 ? false : true;
-        this.setState({
-          isCalculatingData: false,
-          showResultDescription
-        }, () => {
-          if (!showResultDescription) {
-            this.drawChart(data);
-            this.calculateData = data;
-          }
-        });
-      });
-    }
-  }
-  shouldComponentUpdate(nextProps, nextState) {
-    const {
-      colorThemeName
-    } = this.props;
-    if (this.canUpdate(this.props, nextProps)) {
-      return true;
-    }
-    if (nextState.isCalculatingData !== this.state.isCalculatingData) {
-      return true;
-    }
-    if (nextProps.colorThemeName !== colorThemeName) {
-      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.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;
-  }
-  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", {
-      ref: ref => this.container = ref,
-      className: "".concat(_statisticChartModule.default['statistic-pie-chart-container'], " statistic-chart-container")
-    }));
-  }
-}
-RingChart.propTypes = propTypes;
-var _default = exports.default = RingChart;

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

@@ -1,306 +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");
-var _statisticChartModule = _interopRequireDefault(require("../assets/css/statistic-chart.module.css"));
-const propTypes = {
-  isPreview: _propTypes.default.bool,
-  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 ScatterChart extends _baseChart.default {
-  constructor(props) {
-    super(props);
-    this.drawChart = data => {
-      const {
-        getTableById,
-        isPreview,
-        statItem,
-        colorThemeName
-      } = this.props;
-      const currentTheme = (0, _commonUtils.getCurrentTheme)(colorThemeName);
-      const {
-        table_id,
-        x_axis_column,
-        y_axis_column
-      } = statItem;
-      const selectedTable = getTableById(table_id);
-      const selectedXAxisColumn = (0, _dtableUtils.getTableColumnByKey)(selectedTable, x_axis_column);
-      const selectedYAxisColumn = (0, _dtableUtils.getTableColumnByKey)(selectedTable, y_axis_column);
-      if (isPreview) {
-        this.chart = new _customG.Chart({
-          container: this.container,
-          autoFit: true
-        });
-      } else {
-        this.chart = new _customG.Chart({
-          container: this.container,
-          height: 400,
-          width: 700
-        });
-      }
-      this.chart.on('element:click', e => {
-        this.props.toggleStatisticRecordsDialog(e.data.data, statItem);
-      });
-      const themeColors = this.getThemeColors();
-      this.chart.axis('x_axis', {
-        label: {
-          style: {
-            fill: themeColors.textColor
-          }
-        },
-        line: {
-          style: themeColors.gridColor
-        }
-      });
-      this.chart.axis('y_axis', {
-        grid: {
-          line: {
-            style: {
-              stroke: themeColors.gridColor
-            }
-          }
-        },
-        label: {
-          style: {
-            fill: themeColors.textColor
-          }
-        }
-      });
-      const chart = this.chart;
-      chart.data(data);
-      chart.scale({
-        x_axis: {
-          nice: true
-        },
-        y_axis: {
-          nice: true
-        }
-      });
-      chart.tooltip({
-        showTitle: false,
-        showCrosshairs: true,
-        crosshairs: {
-          type: 'xy'
-        },
-        itemTpl: '<li class="g2-tooltip-list-item" data-index={index} style="margin-bottom:4px;">' + '<span style="background-color:{color};" class="g2-tooltip-marker"></span>' + '{name}<br/>' + '{valueX}<br/>' + '{valueY}' + '</li>'
-      });
-      chart.point().position('x_axis*y_axis').color('group_by', currentTheme && currentTheme.colors).shape('circle').tooltip('group_by*x_axis*y_axis', (group_by, x_axis, y_axis) => {
-        return {
-          name: group_by || group_by === 0 ? group_by : _reactIntlUniversal.default.get(_constants.EMPTY_NAME),
-          valueX: "".concat(selectedXAxisColumn.name, ": ").concat(x_axis),
-          valueY: "".concat(selectedYAxisColumn.name, ": ").concat(y_axis)
-        };
-      }).style({
-        fillOpacity: 0.85
-      });
-      chart.legend('group_by', {
-        position: 'bottom',
-        itemName: {
-          formatter: name => {
-            return name || name === 0 ? name : _reactIntlUniversal.default.get(_constants.EMPTY_NAME);
-          },
-          style: {
-            fill: themeColors.textColor
-          }
-        },
-        pageNavigator: {
-          text: {
-            style: {
-              fill: themeColors.textColor
-            }
-          },
-          marker: {
-            style: {
-              fill: themeColors.legendPageNavigatorMarkerColor,
-              inactiveFill: themeColors.legendPageNavigatorMarkerColor,
-              inactiveOpacity: 0.45
-            }
-          }
-        }
-      });
-      chart.interaction('legend-highlight');
-      chart.render();
-      this.renderAxisLabel();
-    };
-    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,
-        y_axis_column,
-        show_y_axis_label,
-        show_x_axis_label,
-        y_axis_label_position,
-        x_axis_label_position
-      } = statItem;
-      const table = getTableById(table_id);
-      const autoPadding = this.chart.autoPadding;
-      const textColor = this.getAxisLabelColor();
-      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);
-        div.innerHTML = "".concat(column ? column.name : '');
-        div.setAttribute('style', "color:".concat(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(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 yAxisID = "chart-y-axis-label_".concat(statItem._id);
-      const yLabel = chartContainer.querySelector("#".concat(yAxisID));
-      let paddingLeft = autoPadding.bottom + (show_x_axis_label ? 10 : 0);
-      if (!yLabel && show_y_axis_label) {
-        const div = document.createElement('div');
-        div.id = yAxisID;
-        div.className = 'statistic-chart-axis-label';
-        const column = (0, _dtableUtils.getTableColumnByKey)(table, y_axis_column) || {};
-        div.innerHTML = column.name || '';
-        const containerHeight = chartContainer.offsetHeight;
-        let textAlign = 'center';
-        if (y_axis_label_position === 'bottom') textAlign = 'left';
-        if (y_axis_label_position === 'top') textAlign = 'right';
-        div.setAttribute('style', "color:".concat(textColor, "; padding-right: ").concat(autoPadding.top, "px; padding-left: ").concat(paddingLeft, "px; position: absolute; width: ").concat(containerHeight, "px; text-align: ").concat(textAlign, "; top: 0; left: 0px; transform: translate(-").concat(containerHeight / 2 + 12, "px, ").concat((containerHeight - autoPadding.bottom) / 2 + autoPadding.bottom / 4, "px) rotate(-90deg)"));
-        chartContainer.appendChild(div);
-      }
-      if (yLabel && show_y_axis_label) {
-        const containerHeight = chartContainer.offsetHeight;
-        let textAlign = 'center';
-        if (y_axis_label_position === 'bottom') textAlign = 'left';
-        if (y_axis_label_position === 'top') textAlign = 'right';
-        yLabel.setAttribute('style', "color:".concat(textColor, "; padding-right: ").concat(autoPadding.top, "px; padding-left: ").concat(paddingLeft, "px; position: absolute; width: ").concat(containerHeight, "px; text-align: ").concat(textAlign, "; top: 0; left: 0px; transform: translate(-").concat(containerHeight / 2 + 12, "px, ").concat((containerHeight - autoPadding.bottom) / 2 + autoPadding.bottom / 4, "px) rotate(-90deg)"));
-      }
-      if (yLabel && !show_y_axis_label) {
-        yLabel.parentNode.removeChild(yLabel);
-      }
-    };
-    this.state = {
-      isCalculatingData: true
-    };
-    this.calculateData = null;
-  }
-  async componentDidMount() {
-    const {
-      statItem,
-      chartCalculator,
-      eventBus
-    } = this.props;
-    if (this.container) {
-      const data = await chartCalculator.calculate(statItem);
-      this.setState({
-        isCalculatingData: false
-      });
-      this.drawChart(data);
-      this.calculateData = data;
-    }
-    this.unsubscribeStyleChange = eventBus.subscribe(_constants.LABEL_CONFIG_CHANGED, newStatItem => {
-      this.renderAxisLabel(newStatItem);
-    });
-  }
-  shouldComponentUpdate(nextProps, nextState) {
-    const {
-      colorThemeName
-    } = this.props;
-    if (this.canUpdate(this.props, nextProps)) {
-      return true;
-    }
-    if (nextState.isCalculatingData !== this.state.isCalculatingData) {
-      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)) {
-      if (this.container) {
-        this.setState({
-          isCalculatingData: true
-        });
-        const data = await chartCalculator.calculate(statItem);
-        this.calculateData = data;
-        this.setState({
-          isCalculatingData: false
-        });
-        this.chart && this.chart.destroy();
-        this.drawChart(data);
-        if (this.props.isPreview) {
-          this.chart.forceFit();
-        }
-      }
-    } else {
-      this.chart && this.chart.destroy();
-      this.drawChart(this.calculateData);
-      if (this.props.isPreview) {
-        this.chart.forceFit();
-      }
-    }
-  }
-  componentWillUnmount() {
-    this.container = null;
-    this.unsubscribeStyleChange && this.unsubscribeStyleChange();
-  }
-  render() {
-    const {
-      isCalculatingData
-    } = this.state;
-    const {
-      show_x_axis_label,
-      show_y_axis_label
-    } = this.props.statItem;
-    const style = {};
-    if (show_x_axis_label) {
-      style.paddingBottom = 38;
-    }
-    if (show_y_axis_label) {
-      style.paddingLeft = 38;
-    }
-    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, isCalculatingData && this.renderLoading(), /*#__PURE__*/_react.default.createElement("div", {
-      ref: ref => this.container = ref,
-      className: "".concat(_statisticChartModule.default['statistic-scatter-chart-container'], " statistic-chart-container"),
-      style: style
-    }));
-  }
-}
-ScatterChart.propTypes = propTypes;
-var _default = exports.default = ScatterChart;