sea-chart 0.0.1

package/lib/components/formatter/pie.js

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

package/lib/components/formatter/ring.js

@@ -0,0 +1,277 @@
+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 Ring = /*#__PURE__*/function (_ChartComponent) {
+  _inherits(Ring, _ChartComponent);
+  var _super = _createSuper(Ring);
+  function Ring(props) {
+    var _this;
+    _classCallCheck(this, Ring);
+    _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,
+        summaryColumn = _this$props.summaryColumn;
+      if (data.length === 0) return;
+      _this.sum = data.total;
+      _this.chart.coordinate('theta', {
+        radius: 0.95,
+        innerRadius: 0.7
+      });
+      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,
+        total = _StatisticsUtils$form.total;
+      if (!Array.isArray(newData)) return;
+      _this.sum = total;
+      _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: '#6e6e6e'
+            }
+          },
+          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.setAnnotation({
+        name: intl.get('Total'),
+        value: StatisticsUtils.getSummaryValueDisplayString(summaryColumn, _this.sum, summary_method)
+      }, '#000000');
+      _this.chart.on('interval:mouseenter', function (evt) {
+        return _this.onEnterRingChart(evt, '#000000', {
+          summaryColumn: summaryColumn,
+          summaryMethod: summary_method
+        });
+      });
+      _this.chart.on('interval:mouseleave', function (evt) {
+        return _this.onLeaveRingChart(evt, '#000000', {
+          summaryColumn: summaryColumn,
+          summaryMethod: summary_method
+        });
+      });
+      _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.setAnnotation = function (content, fontColor) {
+      var _ref = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {},
+        summaryColumn = _ref.summaryColumn,
+        summaryMethod = _ref.summaryMethod;
+      var name = content.name;
+      if (!name || name === 'undefined') {
+        name = intl.get('Empty');
+      } else if (name === '_Others') {
+        name = intl.get('Others');
+      }
+      _this.chart.annotation().text({
+        content: name,
+        position: ['50%', '50%'],
+        style: {
+          fontSize: 12,
+          fill: fontColor,
+          fontWeight: '300',
+          textAlign: 'center'
+        },
+        offsetY: -20
+      }).text({
+        position: ['50%', '50%'],
+        content: summaryColumn ? StatisticsUtils.getSummaryValueDisplayString(summaryColumn, content.value, summaryMethod) : content.value,
+        style: {
+          fontSize: 20,
+          fill: fontColor,
+          textAlign: 'center'
+        },
+        offsetY: 20
+      });
+    };
+    _this.onEnterRingChart = function (ev, color, _ref2) {
+      var summaryColumn = _ref2.summaryColumn,
+        summaryMethod = _ref2.summaryMethod;
+      var item = ev.data.data;
+      _this.chart.annotation().clear(true);
+      _this.setAnnotation(item, color, {
+        summaryColumn: summaryColumn,
+        summaryMethod: summaryMethod
+      });
+      _this.chart.render(true);
+    };
+    _this.onLeaveRingChart = function (ev, color, _ref3) {
+      var summaryColumn = _ref3.summaryColumn,
+        summaryMethod = _ref3.summaryMethod;
+      _this.chart.annotation().clear(true);
+      _this.setAnnotation({
+        name: intl.get('Total'),
+        value: _this.sum
+      }, color, {
+        summaryColumn: summaryColumn,
+        summaryMethod: summaryMethod
+      });
+      _this.chart.render(true);
+    };
+    _this.sum = 0;
+    _this.chart = null;
+    return _this;
+  }
+  _createClass(Ring, [{
+    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.sum = 0;
+        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(_ref4) {
+          return _this2.container = _ref4;
+        }
+      });
+    }
+  }]);
+  return Ring;
+}(ChartComponent);
+Ring.propTypes = {
+  canvasStyle: PropTypes.object,
+  statistic: PropTypes.object,
+  groupbyColumn: PropTypes.object,
+  columnGroupbyColumn: PropTypes.object,
+  summaryColumn: PropTypes.object,
+  result: PropTypes.array,
+  tables: PropTypes.array,
+  toggleRecords: PropTypes.func
+};
+export default Ring;

package/lib/components/formatter/table/index.css

@@ -0,0 +1,103 @@
+.seastatistic-pivot-table {
+  width: 100%;
+  position: relative;
+}
+
+.seastatistic-pivot-table thead {
+  border-top: 1px solid #ccc;
+}
+
+.seastatistic-pivot-table tr {
+  border-bottom: 1px solid #ccc;
+  text-align: center;
+}
+
+.seastatistic-pivot-table th {
+  color: #212529;
+}
+
+.seastatistic-pivot-table th,
+.seastatistic-pivot-table td {
+  padding: 10px;
+  border-right: 1px solid #ccc;
+  border-left: 1px solid #ccc;
+  border-bottom: none;
+  overflow: hidden;
+  min-width: 100px;
+  width: 150px;
+  max-width: 150px;
+  font-weight: 400;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  text-align: center;
+}
+
+.seastatistic-pivot-table .column-title,
+.seastatistic-pivot-table .row-title {
+  padding: 0;
+  text-align: center;
+  color: inherit;
+}
+
+.seastatistic-pivot-table .column-title {
+  caption-side: top;
+}
+
+.seastatistic-pivot-table .row-title {
+  position: absolute;
+  transform: rotate(-90deg);
+  width: 100px;
+  left: -60px;
+  top: 50%;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+.seastatistic-pivot-table .pivot-cell {
+  position: relative;
+  overflow: hidden;
+}
+
+.seastatistic-pivot-table .pivot-cell:hover {
+  cursor: pointer;
+}
+
+.seastatistic-pivot-table .selected-pivot-cell {
+  border-bottom: 1px solid #66afe9;
+  border-right: 1px solid #66afe9;
+}
+
+.seastatistic-pivot-table .selected-pivot-cell-top {
+  border-bottom: 1px solid #66afe9;
+}
+
+.seastatistic-pivot-table .selected-pivot-cell-left {
+  border-right: 1px solid #66afe9 ;
+}
+
+.seastatistic-pivot-table .selected-pivot-cell-border {
+  display: inline-block;
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  top: 0px;
+  left: 0px;
+  border: 1px solid #66afe9;
+}
+
+.seastatistic-pivot-table .pivot-empty-cell i {
+  display: inline-block;
+  height: 6px;
+  width: 16px;
+  border-radius: 6px;
+  background: #f1f1f1;
+}
+
+.seastatistic-pivot-table td>div {
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  font-size: 13px;
+  max-width: 100%;
+}

package/lib/components/formatter/table/index.js

@@ -0,0 +1,42 @@
+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, { PureComponent } from 'react';
+import TwoDimensionTable from './two-dimension-table';
+import OneDimensionTableNoNumericColumns from './one-dimension-table-no-numeric-columns';
+import OneDimensionTableWithNumericColumns from './one-dimension-table-with-numeric-columns';
+import intl from '../../../intl';
+import './index.css';
+var Table = /*#__PURE__*/function (_PureComponent) {
+  _inherits(Table, _PureComponent);
+  var _super = _createSuper(Table);
+  function Table() {
+    _classCallCheck(this, Table);
+    return _super.apply(this, arguments);
+  }
+  _createClass(Table, [{
+    key: "render",
+    value: function render() {
+      var _this$props = this.props,
+        groupbyColumn = _this$props.groupbyColumn,
+        columnGroupbyColumn = _this$props.columnGroupbyColumn,
+        result = _this$props.result;
+      var pivot_columns = result.pivot_columns;
+      if (!groupbyColumn) return '';
+      if (Array.isArray(pivot_columns) && pivot_columns.length > 100) {
+        return /*#__PURE__*/React.createElement("div", null, intl.get('There_are_too_many_statistics_entries_to_display'));
+      }
+      if (columnGroupbyColumn) {
+        return /*#__PURE__*/React.createElement(TwoDimensionTable, this.props);
+      }
+      if (!Array.isArray(pivot_columns)) return null;
+      if (pivot_columns.length < 2) {
+        return /*#__PURE__*/React.createElement(OneDimensionTableNoNumericColumns, this.props);
+      }
+      return /*#__PURE__*/React.createElement(OneDimensionTableWithNumericColumns, this.props);
+    }
+  }]);
+  return Table;
+}(PureComponent);
+export default Table;