dtable-statistic 4.4.24-alpha.9 → 5.0.0

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

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

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