sea-chart 0.0.1 → 0.0.2

package/lib/components/formatter/line-group.js

@@ -1,157 +0,0 @@
-import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
-import _createClass from "@babel/runtime/helpers/esm/createClass";
-import _inherits from "@babel/runtime/helpers/esm/inherits";
-import _createSuper from "@babel/runtime/helpers/esm/createSuper";
-import React from 'react';
-import PropTypes from 'prop-types';
-import classnames from 'classnames';
-import { EMPTY_NAME } from '../../constants';
-import { StatisticsUtils } from '../../utils';
-import intl from '../../intl';
-import ChartComponent from './chart-component';
-var LineGroup = /*#__PURE__*/function (_ChartComponent) {
-  _inherits(LineGroup, _ChartComponent);
-  var _super = _createSuper(LineGroup);
-  function LineGroup(props) {
-    var _this;
-    _classCallCheck(this, LineGroup);
-    _this = _super.call(this, props);
-    _this.createChart = function () {
-      var statistic = _this.props.statistic;
-      var y_axis_show_value = statistic.config.y_axis_show_value;
-      var appendPadding = [y_axis_show_value ? 17 : 0, 0, 0, 0];
-      _this.initChart(_this.container, {
-        appendPadding: appendPadding
-      });
-      _this.chart.on('statistic:click', function (e) {
-        _this.props.toggleRecords(e.data.data);
-      });
-    };
-    _this.clearChart = function () {
-      _this.chart.annotation().clear(true);
-      _this.chart.clear(true);
-    };
-    _this.drawChart = function () {
-      var data = _this.props.result;
-      data = StatisticsUtils.formatEmptyName(data, '', intl.get('Empty'));
-      if (!Array.isArray(data)) return;
-      _this.chart.scale(_this.groupName, {
-        type: 'cat'
-      });
-      _this.loadData(data);
-      _this.draw(data);
-      _this.chart.render();
-    };
-    _this.draw = function (data) {
-      var _this$props = _this.props,
-        statistic = _this$props.statistic,
-        summaryColumn = _this$props.summaryColumn,
-        theme = _this$props.theme;
-      var _statistic$config = statistic.config,
-        y_axis_summary_method = _statistic$config.y_axis_summary_method,
-        y_axis_show_value = _statistic$config.y_axis_show_value,
-        label_font_size = _statistic$config.label_font_size;
-      var chartBarColor = _this.groupName;
-      var newData = _this.getChartGroupData(data);
-      _this.drawLabels(newData);
-
-      // set Coord type
-      _this.chart.coordinate('rect');
-      _this.autoAdjustDataOptions(statistic, data, summaryColumn);
-      _this.chart.scale({
-        group_name: {
-          type: 'cat'
-        }
-      });
-      _this.chart.line().position('name*value').color(chartBarColor);
-      _this.chart.point().label(y_axis_show_value ? 'value' : false, {
-        style: {
-          fontSize: StatisticsUtils.getLabelFontSize(label_font_size),
-          fill: theme.textColor
-        }
-      }).position('name*value').size(3).color(chartBarColor).tooltip('name*value*group_name', function (name, value, group_name) {
-        return {
-          title: !name && typeof name !== 'number' ? intl.get(EMPTY_NAME) : name,
-          value: StatisticsUtils.getSummaryValueDisplayString(summaryColumn, value, y_axis_summary_method),
-          name: !group_name && typeof group_name !== 'number' ? intl.get(EMPTY_NAME) : group_name
-        };
-      }).shape('circle').style({
-        lineWidth: 1,
-        stroke: '#fff'
-      });
-      _this.chart.tooltip({
-        showCrosshairs: true,
-        showTitle: true,
-        containerTpl: '<div class="g2-tooltip"><div class="g2-tooltip-list"></div></div>',
-        itemTpl: '<div class="g2-tooltip-content"><div class="tooltip-name">{title}<div><div class="tooltip-item">{name}: {value}<div></div>',
-        domStyles: {
-          'g2-tooltip': {
-            borderRadius: '2px',
-            backgroundColor: '#fff',
-            padding: '10px'
-          },
-          'tooltip-item': {
-            marginTop: '5px'
-          }
-        }
-      });
-      _this.setNameLabelAndTooltip(theme, _this.labelCount);
-      _this.setValueLabel(theme);
-      _this.setLegend(_this.groupName, theme, 'bottom');
-    };
-    _this.chart = null;
-    _this.groupName = 'group_name';
-    return _this;
-  }
-  _createClass(LineGroup, [{
-    key: "componentDidMount",
-    value: function componentDidMount() {
-      this.createChart();
-      this.drawChart();
-      this.renderAxisLabel(this.props.statistic, this.props.tables);
-    }
-  }, {
-    key: "componentDidUpdate",
-    value: function componentDidUpdate(prevProps) {
-      if (StatisticsUtils.shouldChartComponentUpdate(prevProps, this.props)) {
-        this.chart && this.chart.destroy();
-        this.createChart();
-        this.drawChart();
-        this.renderAxisLabel(prevProps.statistic, prevProps.tables);
-      }
-    }
-  }, {
-    key: "componentWillUnmount",
-    value: function componentWillUnmount() {
-      this.chart && this.chart.destroy();
-    }
-  }, {
-    key: "render",
-    value: function render() {
-      var _this2 = this;
-      var statistic = this.props.statistic;
-      return /*#__PURE__*/React.createElement("div", {
-        className: classnames('seastatistic-container w-100', {
-          'show-x-axis-label': this.isShowXAxisLabel(statistic),
-          'show-y-axis-label': this.isShowYAxisLabel(statistic)
-        }),
-        ref: function ref(_ref) {
-          return _this2.container = _ref;
-        }
-      });
-    }
-  }]);
-  return LineGroup;
-}(ChartComponent);
-LineGroup.propTypes = {
-  canvasStyle: PropTypes.object,
-  statistic: PropTypes.object,
-  groupbyColumn: PropTypes.object,
-  columnGroupbyColumn: PropTypes.object,
-  summaryColumn: PropTypes.object,
-  result: PropTypes.array,
-  tables: PropTypes.array,
-  theme: PropTypes.object,
-  toggleRecords: PropTypes.func
-};
-export default LineGroup;

package/lib/components/formatter/line.js

@@ -1,170 +0,0 @@
-import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
-import _createClass from "@babel/runtime/helpers/esm/createClass";
-import _inherits from "@babel/runtime/helpers/esm/inherits";
-import _createSuper from "@babel/runtime/helpers/esm/createSuper";
-import React from 'react';
-import PropTypes from 'prop-types';
-import classnames from 'classnames';
-import { STATISTIC_SUMMARY_TYPE, STATISTIC_SUMMARY_SHOW } from '../../constants';
-import { StatisticsUtils } from '../../utils';
-import ChartComponent from './chart-component';
-import intl from '../../intl';
-var Line = /*#__PURE__*/function (_ChartComponent) {
-  _inherits(Line, _ChartComponent);
-  var _super = _createSuper(Line);
-  function Line(props) {
-    var _this;
-    _classCallCheck(this, Line);
-    _this = _super.call(this, props);
-    _this.createChart = function () {
-      var statistic = _this.props.statistic;
-      var y_axis_show_value = statistic.config.y_axis_show_value;
-      var appendPadding = [y_axis_show_value ? 17 : 0, 0, 0, 0];
-      _this.initChart(_this.container, {
-        appendPadding: appendPadding
-      });
-      _this.chart.on('point:click', function (e) {
-        _this.props.toggleRecords(e.data.data);
-      });
-    };
-    _this.clearChart = function () {
-      _this.chart.annotation().clear(true);
-      _this.chart.clear(true);
-    };
-    _this.drawChart = function () {
-      var _this$props = _this.props,
-        data = _this$props.result,
-        statistic = _this$props.statistic,
-        summaryColumn = _this$props.summaryColumn;
-      data = StatisticsUtils.formatEmptyName(data, '', intl.get('Empty'));
-      if (!Array.isArray(data)) return;
-      _this.loadData(data);
-      _this.draw(data);
-      _this.autoAdjustDataOptions(statistic, data, summaryColumn);
-      _this.chart.render();
-    };
-    _this.draw = function (data) {
-      var _this$props2 = _this.props,
-        summaryColumn = _this$props2.summaryColumn,
-        statistic = _this$props2.statistic,
-        theme = _this$props2.theme;
-      var _statistic$config = statistic.config,
-        y_axis_summary_type = _statistic$config.y_axis_summary_type,
-        y_axis_summary_method = _statistic$config.y_axis_summary_method,
-        y_axis_label_color = _statistic$config.y_axis_label_color,
-        y_axis_show_value = _statistic$config.y_axis_show_value,
-        label_font_size = _statistic$config.label_font_size;
-      var chartBarColor = y_axis_label_color || '#2a67d1';
-      _this.drawLabels(data);
-
-      // set Coord type
-      _this.chart.coordinate('rect');
-      _this.chart.line().label(y_axis_show_value ? 'value' : false, {
-        style: {
-          fontSize: StatisticsUtils.getLabelFontSize(label_font_size),
-          fill: theme.textColor
-        }
-      }).position('name*value').color(chartBarColor).tooltip('name*value', function (name, value) {
-        return {
-          name: y_axis_summary_type === STATISTIC_SUMMARY_TYPE.COUNT ? intl.get('Amount') : intl.get(STATISTIC_SUMMARY_SHOW[y_axis_summary_method]),
-          value: StatisticsUtils.getSummaryValueDisplayString(summaryColumn, value, y_axis_summary_method)
-        };
-      });
-      _this.chart.point().position('name*value').color(chartBarColor).shape('circle').size(3).style({
-        lineWidth: 1,
-        stroke: '#fff'
-      }).tooltip('name*value', function (name, value) {
-        return {
-          name: name,
-          value: StatisticsUtils.getSummaryValueDisplayString(summaryColumn, value, y_axis_summary_method),
-          title: y_axis_summary_type === STATISTIC_SUMMARY_TYPE.COUNT ? intl.get('Amount') : intl.get(STATISTIC_SUMMARY_SHOW[y_axis_summary_method])
-        };
-      });
-      _this.chart.tooltip({
-        showCrosshairs: true,
-        showTitle: true,
-        containerTpl: '<div class="g2-tooltip"><div class="g2-tooltip-list"></div></div>',
-        itemTpl: '<div class="g2-tooltip-content"><div class="tooltip-name">{title}<div><div class="tooltip-item">{name}: {value}<div></div>',
-        domStyles: {
-          'g2-tooltip': {
-            borderRadius: '2px',
-            backgroundColor: '#fff',
-            padding: '10px'
-          },
-          'tooltip-item': {
-            marginTop: '5px'
-          }
-        }
-      });
-      _this.setNameLabelAndTooltip(theme, _this.labelCount);
-      _this.setValueLabel(theme);
-      _this.chart.theme({
-        geometries: {
-          point: {
-            circle: {
-              active: {
-                style: {
-                  stroke: 'rgba(0, 0, 0, 0)',
-                  r: 4
-                }
-              }
-            }
-          }
-        }
-      });
-    };
-    _this.chart = null;
-    return _this;
-  }
-  _createClass(Line, [{
-    key: "componentDidMount",
-    value: function componentDidMount() {
-      this.createChart();
-      this.drawChart();
-      this.renderAxisLabel(this.props.statistic, this.props.tables);
-    }
-  }, {
-    key: "componentDidUpdate",
-    value: function componentDidUpdate(prevProps) {
-      if (StatisticsUtils.shouldChartComponentUpdate(prevProps, this.props)) {
-        this.chart && this.chart.destroy();
-        this.createChart();
-        this.drawChart();
-        this.renderAxisLabel(prevProps.statistic, prevProps.tables);
-      }
-    }
-  }, {
-    key: "componentWillUnmount",
-    value: function componentWillUnmount() {
-      this.chart && this.chart.destroy();
-    }
-  }, {
-    key: "render",
-    value: function render() {
-      var _this2 = this;
-      var statistic = this.props.statistic;
-      return /*#__PURE__*/React.createElement("div", {
-        className: classnames('seastatistic-container w-100', {
-          'show-x-axis-label': this.isShowXAxisLabel(statistic),
-          'show-y-axis-label': this.isShowYAxisLabel(statistic)
-        }),
-        ref: function ref(_ref) {
-          return _this2.container = _ref;
-        }
-      });
-    }
-  }]);
-  return Line;
-}(ChartComponent);
-Line.propTypes = {
-  canvasStyle: PropTypes.object,
-  statistic: PropTypes.object,
-  groupbyColumn: PropTypes.object,
-  columnGroupbyColumn: PropTypes.object,
-  summaryColumn: PropTypes.object,
-  result: PropTypes.array,
-  tables: PropTypes.array,
-  theme: PropTypes.object,
-  toggleRecords: PropTypes.func
-};
-export default Line;

package/lib/components/formatter/pie.js

@@ -1,201 +0,0 @@
-import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
-import _createClass from "@babel/runtime/helpers/esm/createClass";
-import _inherits from "@babel/runtime/helpers/esm/inherits";
-import _createSuper from "@babel/runtime/helpers/esm/createSuper";
-import React from 'react';
-import PropTypes from 'prop-types';
-import { STATISTIC_LABEL_POSITIONS, STATISTIC_LABEL_FORMATS } from '../../constants';
-import { StatisticsUtils } from '../../utils';
-import ChartComponent from './chart-component';
-import intl from '../../intl';
-var Pie = /*#__PURE__*/function (_ChartComponent) {
-  _inherits(Pie, _ChartComponent);
-  var _super = _createSuper(Pie);
-  function Pie(props) {
-    var _this;
-    _classCallCheck(this, Pie);
-    _this = _super.call(this, props);
-    _this.createChart = function () {
-      var canvasStyle = _this.props.canvasStyle;
-      _this.initChart(_this.container, canvasStyle, 0);
-    };
-    _this.destroyChart = function () {
-      _this.chart.destroy();
-      _this.chart = null;
-    };
-    _this.clearChart = function () {
-      _this.chart.annotation().clear(true);
-      _this.chart.clear(true);
-    };
-    _this.drawChart = function () {
-      var _this$props = _this.props,
-        data = _this$props.result,
-        statistic = _this$props.statistic,
-        tables = _this$props.tables,
-        theme = _this$props.theme,
-        summaryColumn = _this$props.summaryColumn;
-      if (data.length === 0) return;
-      _this.chart.coordinate('theta', {
-        radius: 0.95
-      });
-      var _statistic$config = statistic.config,
-        show_legend = _statistic$config.show_legend,
-        display_label = _statistic$config.display_label,
-        label_position = _statistic$config.label_position,
-        label_font_size = _statistic$config.label_font_size,
-        summary_method = _statistic$config.summary_method;
-      var _StatisticsUtils$form = StatisticsUtils.formatPieChartData(data, statistic, tables),
-        newData = _StatisticsUtils$form.data,
-        colorSet = _StatisticsUtils$form.colorSet;
-      if (!Array.isArray(newData)) return;
-      _this.loadData(newData);
-      _this.chart.on('interval:click', function (e) {
-        _this.props.toggleRecords(e.data.data);
-      });
-      if (show_legend) {
-        _this.chart.legend('name', {
-          position: 'right',
-          custom: true,
-          itemName: {
-            style: {
-              fill: theme.textColor
-            }
-          },
-          items: newData.map(function (obj, index) {
-            var name = obj.name;
-            if (!obj.name && typeof obj.name !== 'number') {
-              name = intl.get('Empty');
-            } else if (obj.name === '_Others') {
-              name = intl.get('Others');
-            }
-            return {
-              name: name,
-              value: obj.value,
-              marker: {
-                symbol: 'circle',
-                style: {
-                  r: 5,
-                  fill: colorSet[index]
-                }
-              }
-            };
-          })
-        });
-      } else {
-        _this.chart.legend(false);
-      }
-
-      // Do not automatically adjust the maximum and minimum values in pie chart
-      _this.chart.scale({
-        value: {
-          nice: false
-        }
-      });
-      _this.chart.interval().adjust('stack').position('value').color('name', colorSet).label('value*percent', function (value, percent) {
-        var displayValue = StatisticsUtils.getSummaryValueDisplayString(summaryColumn, value, summary_method);
-        return {
-          content: _this.getLabel(displayValue, percent)
-        };
-      }, {
-        offset: !label_position || label_position === STATISTIC_LABEL_POSITIONS[0] ? -2 : undefined,
-        style: {
-          fill: '#000000',
-          fontSize: StatisticsUtils.getLabelFontSize(label_font_size),
-          shadowBlur: 2,
-          shadowColor: 'rgba(0, 0, 0, .45)'
-        }
-      }).tooltip('name*value*percent', function (name, value, percent) {
-        var title = name;
-        if (!name || name === 'undefined') {
-          title = intl.get('Empty');
-        } else if (name === '_Others') {
-          title = intl.get('Others');
-        }
-        var displayValue = StatisticsUtils.getSummaryValueDisplayString(summaryColumn, value, summary_method);
-        return {
-          name: title,
-          value: display_label ? _this.getLabel(displayValue, percent) : displayValue
-        };
-      }).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('statistic-active');
-      _this.chart.render();
-    };
-    _this.getLabel = function (value, percent) {
-      var _this$props$statistic = _this.props.statistic.config,
-        display_label = _this$props$statistic.display_label,
-        label_format = _this$props$statistic.label_format;
-      if (!display_label) {
-        return '';
-      }
-      switch (label_format) {
-        case STATISTIC_LABEL_FORMATS[0]:
-          return percent;
-        case STATISTIC_LABEL_FORMATS[1]:
-          return value;
-        case STATISTIC_LABEL_FORMATS[2]:
-          return "".concat(value, " (").concat(percent, ")");
-        default:
-          return percent;
-      }
-    };
-    _this.chart = null;
-    return _this;
-  }
-  _createClass(Pie, [{
-    key: "componentDidMount",
-    value: function componentDidMount() {
-      this.createChart();
-      this.drawChart();
-    }
-  }, {
-    key: "componentDidUpdate",
-    value: function componentDidUpdate(prevProps) {
-      if (StatisticsUtils.shouldChartComponentUpdate(prevProps, this.props)) {
-        this.chart && this.destroyChart();
-        this.createChart();
-        this.drawChart();
-      }
-    }
-  }, {
-    key: "componentWillUnmount",
-    value: function componentWillUnmount() {
-      this.chart && this.destroyChart();
-    }
-  }, {
-    key: "render",
-    value: function render() {
-      var _this2 = this;
-      return /*#__PURE__*/React.createElement("div", {
-        className: "seastatistic-container w-100",
-        ref: function ref(_ref) {
-          return _this2.container = _ref;
-        }
-      });
-    }
-  }]);
-  return Pie;
-}(ChartComponent);
-Pie.propTypes = {
-  canvasStyle: PropTypes.object,
-  statistic: PropTypes.object,
-  groupbyColumn: PropTypes.object,
-  summaryColumn: PropTypes.object,
-  result: PropTypes.array,
-  tables: PropTypes.array,
-  theme: PropTypes.object,
-  toggleRecords: PropTypes.func
-};
-export default Pie;