sea-chart 0.0.1

package/lib/components/formatter/index.js

@@ -0,0 +1,181 @@
+import React, { useCallback } from 'react';
+import { STATISTIC_TYPE, STATISTIC_THEME_COLOR } from '../../constants';
+import { StatisticsUtils, eventStopPropagation } from '../../utils';
+import Table from './table';
+import Bar from './bar';
+import BarGroup from './bar-group';
+import Line from './line';
+import LineGroup from './line-group';
+import Pie from './pie';
+import Ring from './ring';
+import HorizontalBar from './horizontal-bar';
+import HorizontalBarGroup from './horizontal-bar-group';
+import Area from './area';
+import BasicNumericCard from './basic-number-card';
+import Treemap from './treemap';
+import Combination from './combination';
+import Dashboard from './dashboard';
+var Formatter = function Formatter(_ref) {
+  var data = _ref.data,
+    statistic = _ref.statistic,
+    tables = _ref.tables,
+    canvasStyle = _ref.canvasStyle;
+  // const [statisticRecords, setStatisticRecords] = useState({});
+  // const [isStatisticRecordsDialogShow, setIsStatisticRecordsDialogShow] = useState(false);
+  // const [selectedCell, setSelectedCell] = useState({});
+
+  var toggleStatisticRecordsDialog = useCallback(function (statisticRecords, selectedCell) {
+    // setIsStatisticRecordsDialogShow(!isStatisticRecordsDialogShow)
+    // setSelectedCell(selectedCell);
+    // setStatisticRecords(statisticRecords);
+  }, []);
+  var onTableClick = useCallback(function (event) {
+    eventStopPropagation(event);
+  }, []);
+  var result = data.result,
+    groupbyColumn = data.groupbyColumn,
+    columnGroupbyColumn = data.columnGroupbyColumn,
+    summaryColumn = data.summaryColumn,
+    statisticTableColumns = data.statisticTableColumns;
+  var _statistic$config = statistic.config,
+    type = _statistic$config.type,
+    summary_columns = _statistic$config.summary_columns,
+    summary_method = _statistic$config.summary_method;
+  var baseProps = {
+    statistic: statistic,
+    result: result,
+    tables: tables,
+    groupbyColumn: groupbyColumn,
+    columnGroupbyColumn: columnGroupbyColumn,
+    summaryColumn: summaryColumn,
+    theme: STATISTIC_THEME_COLOR['light'],
+    toggleRecords: toggleStatisticRecordsDialog
+  };
+  switch (type) {
+    case STATISTIC_TYPE.TABLE:
+      {
+        return /*#__PURE__*/React.createElement("div", {
+          className: "statistic-table-wrapper",
+          onClick: onTableClick
+        }, result && /*#__PURE__*/React.createElement(Table, Object.assign({}, baseProps, {
+          summaryColumns: summary_columns,
+          summaryMethod: summary_method,
+          statisticTableColumns: statisticTableColumns
+        })));
+      }
+    case STATISTIC_TYPE.COMBINATION:
+      {
+        return /*#__PURE__*/React.createElement(Combination, Object.assign({}, baseProps, {
+          canvasStyle: canvasStyle
+        }));
+      }
+    case STATISTIC_TYPE.BAR:
+      {
+        return /*#__PURE__*/React.createElement(Bar, Object.assign({}, baseProps, {
+          canvasStyle: canvasStyle
+        }));
+      }
+    case STATISTIC_TYPE.BAR_GROUP:
+      {
+        var config = statistic.config;
+        var column_groupby_column_key = config.column_groupby_column_key,
+          column_groupby_multiple_numeric_column = config.column_groupby_multiple_numeric_column;
+        var BarGroupComponent = column_groupby_column_key || column_groupby_multiple_numeric_column ? BarGroup : Bar;
+        return /*#__PURE__*/React.createElement(BarGroupComponent, Object.assign({}, baseProps, {
+          canvasStyle: canvasStyle
+        }));
+      }
+    case STATISTIC_TYPE.HORIZONTAL_BAR:
+      {
+        var _config = statistic.config,
+          id = statistic.id,
+          style_config = statistic.style_config;
+        var newConfig = StatisticsUtils.convertStatisticConfig(_config);
+        var newStatistic = {
+          id: id,
+          config: newConfig,
+          style_config: style_config
+        };
+        return /*#__PURE__*/React.createElement(HorizontalBar, Object.assign({}, baseProps, {
+          canvasStyle: canvasStyle,
+          statistic: newStatistic
+        }));
+      }
+    case STATISTIC_TYPE.HORIZONTAL_GROUP_BAR:
+      {
+        var _config2 = statistic.config,
+          _id = statistic.id,
+          _style_config = statistic.style_config;
+        var _newConfig = StatisticsUtils.convertStatisticConfig(_config2);
+        var _newStatistic = {
+          id: _id,
+          config: _newConfig,
+          style_config: _style_config
+        };
+        var _column_groupby_column_key = _config2.column_groupby_column_key,
+          _column_groupby_multiple_numeric_column = _config2.column_groupby_multiple_numeric_column;
+        var HorizontalComponent = _column_groupby_column_key || _column_groupby_multiple_numeric_column ? HorizontalBarGroup : HorizontalBar;
+        return /*#__PURE__*/React.createElement(HorizontalComponent, Object.assign({}, baseProps, {
+          canvasStyle: canvasStyle,
+          statistic: _newStatistic
+        }));
+      }
+    case STATISTIC_TYPE.LINE_GROUP:
+      {
+        var _config3 = statistic.config;
+        var _column_groupby_column_key2 = _config3.column_groupby_column_key,
+          _column_groupby_multiple_numeric_column2 = _config3.column_groupby_multiple_numeric_column;
+        var LineGroupComponent = _column_groupby_column_key2 || _column_groupby_multiple_numeric_column2 ? LineGroup : Line;
+        return /*#__PURE__*/React.createElement(LineGroupComponent, Object.assign({}, baseProps, {
+          canvasStyle: canvasStyle
+        }));
+      }
+    case STATISTIC_TYPE.LINE:
+      {
+        return /*#__PURE__*/React.createElement(Line, Object.assign({}, baseProps, {
+          canvasStyle: canvasStyle
+        }));
+      }
+    case STATISTIC_TYPE.BASIC_NUMBER_CARD:
+      {
+        return /*#__PURE__*/React.createElement(BasicNumericCard, Object.assign({}, baseProps, {
+          canvasStyle: canvasStyle
+        }));
+      }
+    case STATISTIC_TYPE.AREA:
+      {
+        return /*#__PURE__*/React.createElement(Area, Object.assign({}, baseProps, {
+          canvasStyle: canvasStyle
+        }));
+      }
+    case STATISTIC_TYPE.PIE:
+      {
+        return /*#__PURE__*/React.createElement(Pie, Object.assign({}, baseProps, {
+          canvasStyle: canvasStyle
+        }));
+      }
+    case STATISTIC_TYPE.RING:
+      {
+        return /*#__PURE__*/React.createElement(Ring, Object.assign({}, baseProps, {
+          canvasStyle: canvasStyle
+        }));
+      }
+    case STATISTIC_TYPE.TREE_MAP:
+      {
+        return /*#__PURE__*/React.createElement(Treemap, Object.assign({}, baseProps, {
+          canvasStyle: canvasStyle
+        }));
+      }
+    case STATISTIC_TYPE.DASHBOARD:
+      {
+        return /*#__PURE__*/React.createElement(Dashboard, Object.assign({}, baseProps, {
+          canvasStyle: canvasStyle
+        }));
+      }
+    default:
+      {
+        return null;
+      }
+  }
+};
+export default Formatter;

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

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

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