sea-chart 2.0.1 → 2.0.2

package/dist/view/wrapper/dashboard.js

@@ -1,179 +0,0 @@
-"use strict";
-
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = _interopRequireWildcard(require("react"));
-var _dtableUtils = require("dtable-utils");
-var _customG = require("../../utils/custom-g2");
-var _utils = require("../../utils");
-var _constants = require("../../constants");
-class Dashboard extends _react.Component {
-  constructor() {
-    super(...arguments);
-    this.componentDidMount = () => {
-      this.drawChart();
-    };
-    this.drawChart = () => {
-      const {
-        chart,
-        globalTheme,
-        canvasStyle,
-        result,
-        customRender
-      } = this.props;
-      const theme = _constants.CHART_THEME_COLOR[globalTheme];
-      const value = (0, _dtableUtils.isNumber)(result) ? result : 0;
-      const {
-        config
-      } = chart;
-      this.chart = new _customG.Chart({
-        container: this.container,
-        autoFit: true,
-        width: '100%',
-        height: '100%'
-      });
-      this.chart.on('interval:click', e => {
-        this.props.toggleRecords(e.data.data);
-      });
-      (0, _customG.registerShape)('point', 'pointer', {
-        draw(cfg, container) {
-          const group = container.addGroup();
-          const 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;
-        }
-      });
-      const number = value > 1 ? 10 : value * 10;
-      const 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
-      });
-      let shownValue = value * 100;
-      const shownDotPos = `${shownValue}`.indexOf('.');
-      if (shownDotPos > -1 && shownDotPos < `${shownValue}`.length - 2) {
-        shownValue = shownValue.toFixed(1);
-      }
-      this.chart.annotation().text({
-        position: ['50%', '90%'],
-        content: `${shownValue} %`,
-        style: {
-          fontSize: canvasStyle.height > 240 ? 36 : 16,
-          fill: theme.textColor,
-          textAlign: 'center'
-        },
-        offsetY: 0
-      });
-      (0, _utils.isFunction)(customRender) && customRender(this.chart);
-      this.chart.render();
-      this.container.title = `${data[0].value * 10} %`;
-    };
-  }
-  componentDidUpdate(prevProps) {
-    if (_utils.BaseUtils.shouldChartComponentUpdate(prevProps, this.props)) {
-      var _this$chart;
-      ((_this$chart = this.chart) === null || _this$chart === void 0 ? void 0 : _this$chart.autoPadding) && this.chart.destroy();
-      this.drawChart();
-    }
-  }
-  render() {
-    return /*#__PURE__*/_react.default.createElement("div", {
-      ref: ref => this.container = ref,
-      className: "sea-chart-container "
-    });
-  }
-}
-var _default = exports.default = Dashboard;

package/dist/view/wrapper/funnel.js

@@ -1,206 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _dataSet = require("@antv/data-set");
-var _classnames = _interopRequireDefault(require("classnames"));
-var _utils = require("../../utils");
-var _constants = require("../../constants");
-var _chartComponent = _interopRequireDefault(require("./chart-component"));
-class Funnel extends _chartComponent.default {
-  constructor(props) {
-    super(props);
-    this.createChart = () => {
-      const appendPadding = [17, 0, 0, 0]; // used to display value on the top
-      this.initChart(this.container, {
-        appendPadding
-      });
-      this.chart.on('interval:click', e => {
-        this.props.toggleRecords(e.data.data);
-      });
-    };
-    this.drawChart = () => {
-      const {
-        result: data,
-        chart
-      } = this.props;
-      const {
-        x_axis_option_list,
-        funnel_accumulate_values
-      } = chart.config;
-      if (!x_axis_option_list.length) return;
-      const sortedData = (0, _utils.getSortedDataByGivenOrder)(data, x_axis_option_list);
-      sortedData.total = 0;
-      sortedData.forEach(item => {
-        sortedData.total += item.value;
-      });
-      if (funnel_accumulate_values) {
-        for (let i = sortedData.length - 2; i >= 0; i--) {
-          sortedData[i].value += sortedData[i + 1].value;
-        }
-      }
-      const {
-        DataView
-      } = _dataSet.DataSet;
-      const dv = new DataView().source(sortedData);
-      dv.transform({
-        type: 'map',
-        callback(row) {
-          row.percent = sortedData.total === 0 ? 0 : (row.value / sortedData.total * 100).toFixed(2);
-          return row;
-        }
-      });
-      const dvData = dv.rows;
-      this.loadData(dvData);
-      this.draw(dvData);
-      this.chart.render();
-    };
-    this.draw = sortedData => {
-      const {
-        chart,
-        summaryColumn,
-        tables,
-        globalTheme
-      } = this.props;
-      const {
-        table_id,
-        y_axis_summary_type,
-        y_axis_column_key,
-        y_axis_summary_column_key,
-        y_axis_summary_method,
-        funnel_show_legend,
-        funnel_label_position,
-        funnel_label_font_size,
-        funnel_label_format,
-        funnel_show_labels,
-        funnel_show_overall_rate
-      } = chart.config;
-      const theme = _constants.CHART_THEME_COLOR[globalTheme];
-      const title = this.getTitle(tables, table_id, y_axis_summary_type, y_axis_column_key || y_axis_summary_column_key);
-      const isInside = funnel_label_position === _constants.FUNNEL_LABEL_POSITIONS.INSIDE;
-      let labelStyle;
-      if (isInside) {
-        labelStyle = {
-          position: 'middle',
-          offsetY: -(funnel_label_font_size + 5),
-          style: {
-            fontSize: funnel_label_font_size,
-            fill: '#fff'
-          },
-          labelLine: true
-        };
-      } else {
-        labelStyle = {
-          position: 'left',
-          offsetX: -80,
-          style: {
-            fontSize: funnel_label_font_size,
-            fill: theme.labelColor
-          },
-          labelLine: true
-        };
-      }
-      const contentFormatterMap = {
-        [_constants.FUNNEL_LABEL_FORMAT.NUMBER]: obj => obj.value,
-        [_constants.FUNNEL_LABEL_FORMAT.PERCENTAGE]: obj => ((obj === null || obj === void 0 ? void 0 : obj.percent) || 0) + '%',
-        [_constants.FUNNEL_LABEL_FORMAT.NUMBER_AND_PERCENTAGE]: obj => `${obj.value} (${(obj === null || obj === void 0 ? void 0 : obj.percent) || 0}%)`
-      };
-      this.chart.axis(false);
-      this.chart.coordinate('rect').transpose().scale(1, -1);
-      this.chart.interval().adjust('symmetric').position('name*value').shape('funnel').color('name', ['#0050B3', '#1890FF', '#40A9FF', '#69C0FF', '#BAE7FF']).label('name*value*percent', name => {
-        if (name.length > 10) {
-          name = name.substring(0, 10) + '...';
-        }
-        return {
-          content: funnel_show_labels ? `${name}` : ''
-        };
-      }, labelStyle).tooltip('name*value', (name, value) => {
-        return {
-          title,
-          value: _utils.BaseUtils.getSummaryValueDisplayString(summaryColumn, value, y_axis_summary_method),
-          name
-        };
-      }).animate({
-        appear: {
-          animation: 'fade-in'
-        },
-        update: {
-          annotation: 'fade-in'
-        }
-      }).state({
-        active: {
-          style: {
-            stroke: null
-          }
-        }
-      });
-      this.chart.on('beforepaint', () => {
-        this.chart.annotation().clear(true);
-        if (!funnel_show_labels) return;
-        sortedData.forEach(obj => {
-          this.chart.annotation().text({
-            top: true,
-            offsetY: isInside ? 12 : 0,
-            position: [obj.name, 'center'],
-            content: contentFormatterMap[funnel_label_format](obj),
-            style: {
-              fontSize: funnel_label_font_size,
-              stroke: null,
-              fill: '#fff',
-              textAlign: 'center'
-            }
-          });
-        });
-        if (funnel_show_overall_rate) {
-          var _sortedData;
-          this.chart.annotation().text({
-            top: true,
-            position: ['50.5%', '-4%'],
-            content: (((_sortedData = sortedData[sortedData.length - 1]) === null || _sortedData === void 0 ? void 0 : _sortedData.percent) || 0) + '%',
-            style: {
-              fontSize: funnel_label_font_size,
-              stroke: null,
-              fill: theme.labelColor,
-              textAlign: 'center'
-            }
-          });
-        }
-      });
-      if (funnel_show_legend) {
-        this.setLegend('name', theme, 'top-right');
-      } else {
-        this.chart.legend(false);
-      }
-      this.setToolTip();
-      this.chart.interaction('element-active');
-    };
-    this.chart = null;
-  }
-  componentDidMount() {
-    this.createChart();
-    this.drawChart();
-  }
-  componentDidUpdate(prevProps) {
-    if (_utils.BaseUtils.shouldChartComponentUpdate(prevProps, this.props)) {
-      var _this$chart;
-      ((_this$chart = this.chart) === null || _this$chart === void 0 ? void 0 : _this$chart.autoPadding) && this.chart.destroy();
-      this.createChart();
-      this.drawChart();
-    }
-  }
-  componentWillUnmount() {
-    var _this$chart2;
-    ((_this$chart2 = this.chart) === null || _this$chart2 === void 0 ? void 0 : _this$chart2.autoPadding) && this.chart.destroy();
-  }
-  render() {
-    return /*#__PURE__*/_react.default.createElement("div", {
-      className: (0, _classnames.default)('sea-chart-container'),
-      ref: ref => this.container = ref
-    });
-  }
-}
-var _default = exports.default = Funnel;