@alicloud/cloud-charts/lib/Wsankey/index.js


'use strict';

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

exports.__esModule = true;
exports["default"] = exports.Sankey = void 0;

var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));

var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));

var _Base2 = _interopRequireDefault(require("../common/Base"));

var _dataSet = require("@antv/data-set/lib/data-set");

require("@antv/data-set/lib/transform/diagram/sankey");

require("@antv/data-set/lib/connector/graph");

var _rectTooltip = _interopRequireDefault(require("../common/rectTooltip"));

var _rectLegend = _interopRequireDefault(require("../common/rectLegend"));

var _index = _interopRequireDefault(require("../themes/index"));

var _errorWrap = _interopRequireDefault(require("../common/errorWrap"));

var _common = require("../common/common");

require("./index.css");

function getEdges(d) {
  return d.links;
} // 为了颜色映射


function transformData(dv) {
  var nodes = dv.nodes.map(function (node) {
    return {
      x: node.x,
      y: node.y,
      name: node.name
    };
  });
  var edges = dv.edges.map(function (edge) {
    return {
      source: edge.source.name,
      target: edge.target.name,
      name: edge.source.name,
      x: edge.x,
      y: edge.y,
      value: edge.value
    };
  });
  return {
    nodes: nodes,
    edges: edges
  };
}

var Sankey = /*#__PURE__*/function (_Base) {
  (0, _inheritsLoose2["default"])(Sankey, _Base);

  function Sankey() {
    var _this;

    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
      args[_key] = arguments[_key];
    }

    _this = _Base.call.apply(_Base, [this].concat(args)) || this;
    _this.chartName = 'G2Sankey';
    _this.legendField = 'name';
    _this.convertData = false;
    _this.sankeyDataView = void 0;
    _this.edgeView = void 0;
    _this.nodeView = void 0;
    return _this;
  }

  var _proto = Sankey.prototype;

  _proto.getDefaultConfig = function getDefaultConfig() {
    return {
      colors: _index["default"].category_20,
      legend: {
        align: 'left',
        position: 'bottom-left',
        nameFormatter: null // 可以强制覆盖，手动设置label

      },
      tooltip: {
        nameFormatter: null
      },
      labels: true
    };
  };

  _proto.init = function init(chart, config, data) {
    this.legendField = config === null || config === void 0 ? void 0 : config.primaryKey;
    var ds = new _dataSet.DataSet();
    var dv = ds.createView().source(data, {
      type: 'graph',
      edges: getEdges
    });
    dv.transform((0, _extends2["default"])({
      type: 'diagram.sankey',
      nodeId: function nodeId(node) {
        // console.log(node)
        // if (node?.sourceLinks?.length !== 0 || node?.targetLinks?.length !== 0) {
        if (config !== null && config !== void 0 && config.primaryKey) {
          var _node$config$primaryK;

          return (_node$config$primaryK = node === null || node === void 0 ? void 0 : node[config === null || config === void 0 ? void 0 : config.primaryKey]) !== null && _node$config$primaryK !== void 0 ? _node$config$primaryK : null;
        } else {
          return node === null || node === void 0 ? void 0 : node.index;
        } // }

      },
      value: function value(node) {
        return node.value;
      },
      // 权重
      source: function source(edge) {
        return edge.source;
      },
      // 边起点id
      target: function target(edge) {
        return edge.target;
      },
      // 边终点id
      sort: function sort(a, b) {
        if (a.value > b.value) {
          return 0;
        } else if (a.value < b.value) {
          return -1;
        }

        return 0;
      }
    }, config.nodeStyle));
    this.sankeyDataView = dv;
    chart.axis(false);
    chart.scale({
      x: {
        sync: true
      },
      y: {
        sync: true
      },
      source: {
        sync: 'color'
      },
      name: {
        sync: 'color'
      }
    });
    (0, _rectTooltip["default"])(this, chart, config, {}, null, {
      showTitle: false,
      showMarkers: false,
      showCrosshairs: false,
      shared: false
    }); // 为了颜色映射

    var _transformData = transformData(dv),
        edges = _transformData.edges,
        nodes = _transformData.nodes; // edge view


    var edgeView = chart.createView();
    this.edgeView = edgeView;
    edgeView.data(edges);
    edgeView.edge().position('x*y').shape('arc').color('name', config.colors).tooltip('target*source*value', function (target, source, value) {
      if (typeof config.tooltip === 'boolean') {
        return null;
      } else {
        var _config$tooltip, _config$tooltip$nameF;

        return ((_config$tooltip = config.tooltip) === null || _config$tooltip === void 0 ? void 0 : (_config$tooltip$nameF = _config$tooltip.nameFormatter) === null || _config$tooltip$nameF === void 0 ? void 0 : _config$tooltip$nameF.call(_config$tooltip, target, source, value)) || {
          name: source + ' to ' + target,
          value: value
        };
      }
    }).style('source*target', function () {
      return {
        lineWidth: 0,
        opacity: 0.1
      };
    }); // node view

    var nodeView = chart.createView();
    this.nodeView = nodeView;
    nodeView.data(nodes);
    var nodeGeom = nodeView.polygon().position('x*y') // nodes数据的x、y由layout方法计算得出
    .color('name', config.colors).tooltip(false).style({
      stroke: 'transparent'
    });

    if (config.labels) {
      nodeGeom.label('x*name', function (x, name) {
        var isLast = x[1] === 1;
        return {
          style: {
            fill: _index["default"]['widgets-sankey-node-text'],
            textAlign: isLast ? 'end' : 'start'
          },
          offsetX: isLast ? -(0, _common.pxToNumber)(_index["default"]['widgets-font-size-1']) : (0, _common.pxToNumber)(_index["default"]['widgets-font-size-1']),
          content: name
        };
      });
    }

    (0, _rectLegend["default"])(this, chart, (0, _extends2["default"])({}, config, {
      legend: (config === null || config === void 0 ? void 0 : config.legend) !== false ? (0, _extends2["default"])({
        marker: {
          style: {
            stroke: 'rgba(0,0,0,0)',
            r: 3,
            lineWidth: 0
          }
        }
      }, config.legend) : false
    }), {}, false); // chart.interaction('element-active');
  };

  _proto.changeData = function changeData(chart, config, data) {
    if (this.sankeyDataView && this.nodeView && this.edgeView) {
      var dv = this.sankeyDataView.source(data, {
        type: 'graph',
        edges: getEdges
      });

      var _transformData2 = transformData(dv),
          edges = _transformData2.edges,
          nodes = _transformData2.nodes;

      this.edgeView.data(edges);
      this.nodeView.data(nodes);
      chart.render();
    }
  };

  return Sankey;
}(_Base2["default"]);

exports.Sankey = Sankey;
var Wsankey = (0, _errorWrap["default"])(Sankey);
var _default = Wsankey;
exports["default"] = _default;