sea-chart 0.0.1 → 0.0.2

package/lib/components/formatter/dashboard.js

@@ -1,182 +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, { Component } from 'react';
-import { isNumber } from 'dtable-utils';
-import { Chart, registerShape } from '../../utils/custom-g2';
-import { StatisticsUtils } from '../../utils';
-var Dashboard = /*#__PURE__*/function (_Component) {
-  _inherits(Dashboard, _Component);
-  var _super = _createSuper(Dashboard);
-  function Dashboard() {
-    var _this;
-    _classCallCheck(this, Dashboard);
-    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,
-        statistic = _this$props.statistic,
-        theme = _this$props.theme,
-        canvasStyle = _this$props.canvasStyle,
-        result = _this$props.result;
-      var value = isNumber(result) ? result : 0;
-      var config = statistic.config;
-      _this.chart = new Chart({
-        container: _this.container,
-        autoFit: true,
-        width: '100%',
-        height: '100%'
-      });
-      registerShape('point', 'pointer', {
-        draw: function draw(cfg, container) {
-          var group = container.addGroup();
-          var center = this.parsePoint({
-            x: 0,
-            y: 0
-          });
-          group.addShape('line', {
-            attrs: {
-              x1: center.x,
-              y1: center.y - 15,
-              x2: cfg.x,
-              y2: cfg.y - 15,
-              stroke: cfg.color,
-              lineWidth: 5,
-              lineCap: 'round'
-            }
-          });
-          group.addShape('circle', {
-            attrs: {
-              x: center.x,
-              y: center.y - 15,
-              r: 9.75,
-              stroke: cfg.color,
-              lineWidth: 4.5,
-              fill: '#fff'
-            }
-          });
-          return group;
-        }
-      });
-      var number = value > 1 ? 10 : value * 10;
-      var data = [{
-        value: number
-      }];
-      _this.chart.data(data);
-      _this.chart.scale('value', {
-        min: 0,
-        max: 10,
-        tickInterval: 1
-      });
-      _this.chart.coordinate('polar', {
-        startAngle: -9 / 8 * Math.PI,
-        endAngle: 1 / 8 * Math.PI,
-        radius: 0.75
-      });
-      _this.chart.axis('1', false);
-      _this.chart.axis('value', {
-        line: null,
-        label: {
-          offset: -36,
-          style: {
-            fontSize: 12,
-            textAlign: 'center',
-            textBaseline: 'middle'
-          }
-        },
-        subTickLine: {
-          count: 4,
-          length: -15
-        },
-        tickLine: {
-          length: -24
-        },
-        grid: null,
-        offsetY: -15
-      });
-      _this.chart.legend(false);
-      _this.chart.point().position('value*1').shape('pointer').color('#1890FF').animate({
-        appear: {
-          animation: 'fade-in'
-        }
-      });
-      _this.chart.annotation().arc({
-        top: false,
-        start: [0, 1],
-        end: [10, 1],
-        style: {
-          stroke: '#CBCBCB',
-          lineWidth: 10,
-          lineDash: null
-        },
-        offsetY: -15
-      });
-      _this.chart.annotation().arc({
-        start: [0, 1],
-        end: [data[0].value, 1],
-        style: {
-          stroke: '#1890FF',
-          lineWidth: 10,
-          lineDash: null
-        },
-        offsetY: -15
-      });
-      _this.chart.annotation().text({
-        position: ['50%', '85%'],
-        content: config.name,
-        style: {
-          fontSize: canvasStyle.height > 240 ? 20 : 12,
-          fill: '#545454',
-          textAlign: 'center'
-        },
-        offsetY: -10
-      });
-      var shownValue = value * 100;
-      var shownDotPos = "".concat(shownValue).indexOf('.');
-      if (shownDotPos > -1 && shownDotPos < "".concat(shownValue).length - 2) {
-        shownValue = shownValue.toFixed(1);
-      }
-      _this.chart.annotation().text({
-        position: ['50%', '90%'],
-        content: "".concat(shownValue, " %"),
-        style: {
-          fontSize: canvasStyle.height > 240 ? 36 : 16,
-          fill: theme.textColor,
-          textAlign: 'center'
-        },
-        offsetY: 0
-      });
-      _this.chart.render();
-      _this.container.title = "".concat(data[0].value * 10, " %");
-    };
-    return _this;
-  }
-  _createClass(Dashboard, [{
-    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 w-100"
-      });
-    }
-  }]);
-  return Dashboard;
-}(Component);
-export default Dashboard;

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

@@ -1,161 +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 HorizontalComponent from './horizontal-component';
-import intl from '../../intl';
-var HorizontalBarGroup = /*#__PURE__*/function (_HorizontalComponent) {
-  _inherits(HorizontalBarGroup, _HorizontalComponent);
-  var _super = _createSuper(HorizontalBarGroup);
-  function HorizontalBarGroup(props) {
-    var _this;
-    _classCallCheck(this, HorizontalBarGroup);
-    _this = _super.call(this, props);
-    _this.createChart = function () {
-      var statistic = _this.props.statistic;
-      var display_data = statistic.config.display_data;
-      var appendPadding = [0, display_data ? 17 : 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,
-        horizontal_axis_summary_method = _statistic$config.horizontal_axis_summary_method,
-        display_data = _statistic$config.display_data,
-        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(display_data ? '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, horizontal_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.coordinate().transpose();
-      _this.chart.interaction('active-region');
-    };
-    _this.chart = null;
-    _this.groupName = 'group_name';
-    return _this;
-  }
-  _createClass(HorizontalBarGroup, [{
-    key: "componentDidMount",
-    value: function componentDidMount() {
-      this.createChart();
-      this.drawChart();
-      this.renderHorizontalLabel(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.renderHorizontalLabel(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-vertical-axis-label': this.isShowVerticalAxisLabel(statistic),
-          'show-horizontal-axis-label': this.isShowHorizontalAxisLabel(statistic)
-        }),
-        ref: function ref(_ref) {
-          return _this2.container = _ref;
-        }
-      });
-    }
-  }]);
-  return HorizontalBarGroup;
-}(HorizontalComponent);
-HorizontalBarGroup.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 HorizontalBarGroup;

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

@@ -1,152 +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 HorizontalComponent from './horizontal-component';
-import intl from '../../intl';
-var HorizontalBar = /*#__PURE__*/function (_HorizontalComponent) {
-  _inherits(HorizontalBar, _HorizontalComponent);
-  var _super = _createSuper(HorizontalBar);
-  function HorizontalBar(props) {
-    var _this;
-    _classCallCheck(this, HorizontalBar);
-    _this = _super.call(this, props);
-    _this.createChart = function () {
-      var statistic = _this.props.statistic;
-      var display_data = statistic.config.display_data;
-      var appendPadding = [0, display_data ? 17 : 0, 0, 0]; // used to display value on the right
-      _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.renderHorizontalLabel(_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,
-        horizontal_axis_summary_type = _statistic$config.horizontal_axis_summary_type,
-        horizontal_axis_summary_method = _statistic$config.horizontal_axis_summary_method,
-        horizontal_axis_label_color = _statistic$config.horizontal_axis_label_color,
-        display_data = _statistic$config.display_data,
-        label_font_size = _statistic$config.label_font_size;
-      var chartBarColor = horizontal_axis_label_color || '#2a67d1';
-      data.reverse();
-      _this.drawLabels(data);
-
-      // set Coord type
-      _this.chart.coordinate('rect');
-      _this.autoAdjustDataOptions(statistic, data, summaryColumn);
-      _this.chart.interval().label(display_data ? '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: horizontal_axis_summary_type === STATISTIC_SUMMARY_TYPE.COUNT ? intl.get('Amount') : intl.get(STATISTIC_SUMMARY_SHOW[horizontal_axis_summary_method]),
-          value: StatisticsUtils.getSummaryValueDisplayString(summaryColumn, value, horizontal_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.coordinate().transpose();
-      _this.chart.interaction('active-region');
-    };
-    _this.chart = null;
-    return _this;
-  }
-  _createClass(HorizontalBar, [{
-    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-vertical-axis-label': this.isShowVerticalAxisLabel(statistic),
-          'show-horizontal-axis-label': this.isShowHorizontalAxisLabel(statistic)
-        }),
-        ref: function ref(_ref) {
-          return _this2.container = _ref;
-        }
-      });
-    }
-  }]);
-  return HorizontalBar;
-}(HorizontalComponent);
-HorizontalBar.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 HorizontalBar;

package/lib/components/formatter/horizontal-component.js

@@ -1,91 +0,0 @@
-import _createClass from "@babel/runtime/helpers/esm/createClass";
-import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
-import _inherits from "@babel/runtime/helpers/esm/inherits";
-import _createSuper from "@babel/runtime/helpers/esm/createSuper";
-import { getTableById, getTableColumnByKey } from 'dtable-utils';
-import ChartComponent from './chart-component';
-import { STATISTIC_SUMMARY_TYPE, LABEL_POSITION_TYPE } from '../../constants';
-import intl from '../../intl';
-var HorizontalComponent = /*#__PURE__*/function (_ChartComponent) {
-  _inherits(HorizontalComponent, _ChartComponent);
-  var _super = _createSuper(HorizontalComponent);
-  function HorizontalComponent() {
-    var _this;
-    _classCallCheck(this, HorizontalComponent);
-    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.renderHorizontalLabel = function (statistic, tables) {
-      if (!_this.chart || !statistic) return;
-      var _statistic$config = statistic.config,
-        table_id = _statistic$config.table_id,
-        x_axis_column_key = _statistic$config.x_axis_column_key,
-        y_axis_summary_column_key = _statistic$config.y_axis_summary_column_key,
-        y_axis_label_position = _statistic$config.y_axis_label_position,
-        x_axis_label_position = _statistic$config.x_axis_label_position,
-        y_axis_summary_type = _statistic$config.y_axis_summary_type,
-        show_vertical_axis_label = _statistic$config.show_vertical_axis_label,
-        show_horizontal_axis_label = _statistic$config.show_horizontal_axis_label;
-      var table = getTableById(tables, table_id);
-      var autoPadding = _this.chart.autoPadding;
-      var textColor = '#999999';
-      var xAxisID = "chart-x-axis-label_".concat(statistic.id);
-      var chartContainer = _this.chart.getCanvas().get('container');
-      var xLabel = chartContainer.querySelector("#".concat(xAxisID));
-      if (!xLabel && show_horizontal_axis_label) {
-        var div = document.createElement('div');
-        div.id = xAxisID;
-        div.className = 'chart-axis-label';
-        if (y_axis_summary_type === STATISTIC_SUMMARY_TYPE.COUNT) {
-          div.innerHTML = intl.get('Amount');
-        } else {
-          var column = getTableColumnByKey(table, y_axis_summary_column_key);
-          div.innerHTML = "".concat(column ? column.name : '');
-        }
-        div.setAttribute('style', "color:".concat(textColor, "; width: 100%; text-align: ").concat(x_axis_label_position, "; bottom: -20px; position: absolute"));
-        chartContainer.appendChild(div);
-      }
-      if (xLabel && show_horizontal_axis_label) {
-        xLabel.setAttribute('style', "color:".concat(textColor, "; width: 100%; text-align: ").concat(x_axis_label_position, "; bottom: -20px; position: absolute"));
-      }
-      if (xLabel && !show_horizontal_axis_label) {
-        xLabel.parentNode.removeChild(xLabel);
-      }
-      var yAxisID = "chart-y-axis-label_".concat(statistic.id);
-      var yLabel = chartContainer.querySelector("#".concat(yAxisID));
-      if (!yLabel && show_vertical_axis_label) {
-        var _div = document.createElement('div');
-        _div.id = yAxisID;
-        _div.className = 'chart-axis-label';
-        var _column = getTableColumnByKey(table, x_axis_column_key) || {};
-        _div.innerHTML = _column.name || '';
-        var containerHeight = chartContainer.offsetHeight;
-        var textAlign = 'center';
-        if (y_axis_label_position === LABEL_POSITION_TYPE.BOTTOM) textAlign = 'left';
-        if (y_axis_label_position === LABEL_POSITION_TYPE.TOP) textAlign = 'right';
-        _div.setAttribute('style', "color:".concat(textColor, "; position: absolute; width: ").concat(containerHeight, "px; text-align: ").concat(textAlign, "; top: 0; left: 0; transform: translate(-").concat(containerHeight / 2 + 12, "px, ").concat((containerHeight - autoPadding.bottom) / 2 + autoPadding.bottom / 4, "px) rotate(-90deg)"));
-        chartContainer.appendChild(_div);
-      }
-      if (yLabel && show_horizontal_axis_label) {
-        var _containerHeight = chartContainer.offsetHeight;
-        var _textAlign = 'center';
-        if (y_axis_label_position === LABEL_POSITION_TYPE.BOTTOM) _textAlign = 'left';
-        if (y_axis_label_position === LABEL_POSITION_TYPE.TOP) _textAlign = 'right';
-        yLabel.setAttribute('style', "color:".concat(textColor, "; position: absolute; width: ").concat(_containerHeight, "px; text-align: ").concat(_textAlign, "; top: 0; left: 0; transform: translate(-").concat(_containerHeight / 2 + 12, "px, ").concat((_containerHeight - autoPadding.bottom) / 2 + autoPadding.bottom / 4, "px) rotate(-90deg)"));
-      }
-      if (yLabel && !show_horizontal_axis_label) {
-        yLabel.parentNode.removeChild(yLabel);
-      }
-    };
-    _this.isShowVerticalAxisLabel = function (statistic) {
-      return !!(statistic && statistic.config && statistic.config.show_vertical_axis_label);
-    };
-    _this.isShowHorizontalAxisLabel = function (statistic) {
-      return !!(statistic && statistic.config && statistic.config.show_horizontal_axis_label);
-    };
-    return _this;
-  }
-  return _createClass(HorizontalComponent);
-}(ChartComponent);
-export { HorizontalComponent as default };