sea-chart 0.0.1

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

@@ -0,0 +1,160 @@
+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 BarGroup = /*#__PURE__*/function (_ChartComponent) {
+  _inherits(BarGroup, _ChartComponent);
+  var _super = _createSuper(BarGroup);
+  function BarGroup(props) {
+    var _this;
+    _classCallCheck(this, BarGroup);
+    _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('interval: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.interval().label(y_axis_show_value ? 'value' : false, {
+        formatter: function formatter(value) {
+          return value;
+        },
+        style: {
+          fontSize: StatisticsUtils.getLabelFontSize(label_font_size),
+          fill: theme.textColor
+        }
+      }).position('name*value').color(chartBarColor).tooltip('name*value*group_name*raw_name', function (name, value, group_name, raw_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
+        };
+      }).adjust([{
+        type: 'dodge'
+      }]).state({
+        active: {
+          style: {
+            stroke: null
+          }
+        }
+      });
+      _this.chart.tooltip({
+        showTitle: true,
+        showMarkers: false,
+        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.interaction('active-region');
+    };
+    _this.chart = null;
+    _this.groupName = 'group_name';
+    return _this;
+  }
+  _createClass(BarGroup, [{
+    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 BarGroup;
+}(ChartComponent);
+BarGroup.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 BarGroup;

package/lib/components/formatter/bar.js

@@ -0,0 +1,150 @@
+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 intl from '../../intl';
+import ChartComponent from './chart-component';
+var Bar = /*#__PURE__*/function (_ChartComponent) {
+  _inherits(Bar, _ChartComponent);
+  var _super = _createSuper(Bar);
+  function Bar(props) {
+    var _this;
+    _classCallCheck(this, Bar);
+    _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]; // used to display value on the top
+      _this.initChart(_this.container, {
+        appendPadding: appendPadding
+      });
+      _this.chart.on('interval: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.loadData(data);
+      _this.draw(data);
+      _this.chart.render();
+      _this.renderAxisLabel(_this.props.statistic, _this.props.tables);
+    };
+    _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_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.autoAdjustDataOptions(statistic, data, summaryColumn);
+      _this.chart.interval().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 {
+          title: 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),
+          name: name
+        };
+      }).state({
+        active: {
+          style: {
+            stroke: null
+          }
+        }
+      });
+      _this.chart.tooltip({
+        showTitle: true,
+        showMarkers: false,
+        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.interaction('active-region');
+    };
+    _this.chart = null;
+    return _this;
+  }
+  _createClass(Bar, [{
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      this.createChart();
+      this.drawChart();
+    }
+  }, {
+    key: "componentDidUpdate",
+    value: function componentDidUpdate(prevProps) {
+      if (StatisticsUtils.shouldChartComponentUpdate(prevProps, this.props)) {
+        this.chart && this.chart.destroy();
+        this.createChart();
+        this.drawChart();
+      }
+    }
+  }, {
+    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 Bar;
+}(ChartComponent);
+Bar.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 Bar;

package/lib/components/formatter/basic-number-card.js

@@ -0,0 +1,138 @@
+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, { Component } from 'react';
+import { isNumber } from 'dtable-utils';
+import { Chart } from '../../utils/custom-g2';
+import { StatisticsUtils } from '../../utils';
+import intl from '../../intl';
+import { BASIC_NUMBER_CARD_CALCULATION_METHOD, EMPTY_NAME } from '../../constants';
+var BasicNumericCard = /*#__PURE__*/function (_Component) {
+  _inherits(BasicNumericCard, _Component);
+  var _super = _createSuper(BasicNumericCard);
+  function BasicNumericCard() {
+    var _this;
+    _classCallCheck(this, BasicNumericCard);
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+    _this = _super.call.apply(_super, [this].concat(args));
+    _this.componentDidMount = function () {
+      _this.drawChart();
+    };
+    _this.drawChart = function () {
+      var _this$props = _this.props,
+        theme = _this$props.theme,
+        statistic = _this$props.statistic,
+        result = _this$props.result;
+      _this.chart = new Chart({
+        container: _this.container,
+        autoFit: true,
+        width: '100%',
+        height: '100%'
+      });
+      var config = statistic.config;
+      var summary_method = config.summary_method,
+        name = config.name;
+      var content = null;
+      if (summary_method === 'Distinct_values') {
+        content = isNumber(result) ? result : 0;
+      } else {
+        content = _this.formatData(result);
+      }
+      var fontSize = _this.getFontSize(content);
+      var labelFontSize = fontSize - 35;
+      if (labelFontSize > 20) {
+        labelFontSize = 20;
+      }
+      if (labelFontSize < 12) {
+        labelFontSize = 12;
+      }
+      _this.chart.annotation().html({
+        position: ['50%', '50%'],
+        html: "\n        <div style=\"color: ".concat(theme.cardColor, "; text-align: center;\">\n          <p class=\"text-content\" style=\"font-size: ").concat(fontSize, "px; margin: -15px 0 2px 0;\">").concat(content, "</p>\n          <p style=\"font-size: ").concat(labelFontSize, "px;margin: 0;overflow: hidden;text-overflow: ellipsis;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;\">").concat(name, "</p>\n        </div>\n      ")
+      });
+      _this.chart.render();
+    };
+    _this.formatData = function (data) {
+      if (!data && data !== 0) return intl.get(EMPTY_NAME);
+      var _this$props2 = _this.props,
+        statistic = _this$props2.statistic,
+        summaryColumn = _this$props2.summaryColumn;
+      var summary_method = statistic.config.summary_method;
+      if (summary_method !== BASIC_NUMBER_CARD_CALCULATION_METHOD) {
+        var formattedContent = StatisticsUtils.getSummaryValueDisplayString(summaryColumn, data, summary_method);
+        return formattedContent;
+      }
+      var string = data + '';
+      var isFloat = string.indexOf('.') > 0;
+      if (isFloat) {
+        string = string.slice(0, string.indexOf('.'));
+      }
+      var content = '';
+      var endPoint = -3;
+      var startPoint = 0;
+      var subString = string.slice(endPoint);
+      while (subString.length === 3) {
+        content = ',' + subString + content;
+        startPoint = endPoint;
+        endPoint -= 3;
+        subString = string.slice(endPoint, startPoint);
+      }
+      content = subString + content;
+      if (content[0] === ',') {
+        content = content.slice(1);
+      }
+      if (isFloat) {
+        var initString = data + '';
+        content = content + initString.slice(initString.indexOf('.'));
+      }
+      return content;
+    };
+    _this.getFontSize = function (content) {
+      var canvas = document.createElement('canvas');
+      var context = canvas.getContext('2d');
+      var width = _this.chart.width;
+      var font = context.font;
+      var initFontSize = 50;
+      var fontStyle = font.slice(font.indexOf('px'));
+      font = initFontSize + fontStyle;
+      context.font = font;
+      context.fontSize = initFontSize;
+      while (context.measureText(content).width >= width - 40) {
+        initFontSize -= 1;
+        context.font = initFontSize + fontStyle;
+        context.fontSize = initFontSize;
+      }
+      canvas = null;
+      if (initFontSize < 16) {
+        initFontSize = 16;
+      }
+      return initFontSize;
+    };
+    return _this;
+  }
+  _createClass(BasicNumericCard, [{
+    key: "componentDidUpdate",
+    value: function componentDidUpdate(prevProps) {
+      if (StatisticsUtils.shouldChartComponentUpdate(prevProps, this.props)) {
+        this.chart && this.chart.destroy();
+        this.drawChart();
+      }
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this2 = this;
+      return /*#__PURE__*/React.createElement("div", {
+        ref: function ref(_ref) {
+          return _this2.container = _ref;
+        },
+        className: "seastatistic-container plugin-number-card"
+      });
+    }
+  }]);
+  return BasicNumericCard;
+}(Component);
+export default BasicNumericCard;