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


'use strict';

import _extends from "@babel/runtime/helpers/extends";
import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
import Base from '../common/Base';
import { DataSet } from '@antv/data-set/lib/data-set';
import '@antv/data-set/lib/transform/diagram/sankey';
import '@antv/data-set/lib/connector/graph';
import rectTooltip from '../common/rectTooltip';
import rectLegend from '../common/rectLegend';
import themes from '../themes/index';
import errorWrap from '../common/errorWrap';
import { pxToNumber } from '../common/common';
import "./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
  };
}
export var Sankey = /*#__PURE__*/function (_Base) {
  _inheritsLoose(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;
    // 原 g2Factory 的第一个参数，改为类的属性。
    _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: themes.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();
    var dv = ds.createView().source(data, {
      type: 'graph',
      edges: getEdges
    });
    dv.transform(_extends({
      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'
      }
    });
    rectTooltip(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: themes['widgets-sankey-node-text'],
            textAlign: isLast ? 'end' : 'start'
          },
          offsetX: isLast ? -pxToNumber(themes['widgets-font-size-1']) : pxToNumber(themes['widgets-font-size-1']),
          content: name
        };
      });
    }
    rectLegend(this, chart, _extends({}, config, {
      legend: (config === null || config === void 0 ? void 0 : config.legend) !== false ? _extends({
        marker: {
          style: {
            stroke: 'rgba(0,0,0,0)',
            r: 3,
            lineWidth: 0
          }
        }
      }, config.legend) : false
    }), {}, 'graph');
    // 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;
}(Base);
var Wsankey = errorWrap(Sankey);
export default Wsankey;