@antv/gpt-vis 0.4.7 → 0.5.0-beta.0

package/dist/esm/ssr/mind-map.js

@@ -0,0 +1,416 @@
+import _regeneratorRuntime from "@babel/runtime/helpers/esm/regeneratorRuntime";
+import _asyncToGenerator from "@babel/runtime/helpers/esm/asyncToGenerator";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
+import _createClass from "@babel/runtime/helpers/esm/createClass";
+import _get from "@babel/runtime/helpers/esm/get";
+import _getPrototypeOf from "@babel/runtime/helpers/esm/getPrototypeOf";
+import _inherits from "@babel/runtime/helpers/esm/inherits";
+import _createSuper from "@babel/runtime/helpers/esm/createSuper";
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+var _excluded = ["children"];
+import { Rect } from '@antv/g';
+import { createGraph, G6 } from '@antv/g6-ssr';
+import { createCanvas } from 'canvas';
+var register = G6.register,
+  BaseNode = G6.BaseNode,
+  BaseTransform = G6.BaseTransform,
+  ExtensionCategory = G6.ExtensionCategory,
+  idOf = G6.idOf,
+  positionOf = G6.positionOf,
+  treeToGraphData = G6.treeToGraphData;
+var canvas = null;
+var ctx = null;
+var measureText = function measureText(style) {
+  if (!canvas) {
+    canvas = createCanvas(0, 0);
+    ctx = canvas.getContext('2d');
+  }
+  var font = [style.fontStyle || 'normal', style.fontWeight || 'normal', "".concat(style.fontSize || 12, "px"), style.fontFamily || 'sans-serif'].join(' ');
+  ctx.font = font;
+  return ctx.measureText(style.text).width;
+};
+var RootNodeStyle = {
+  fill: '#EFF0F0',
+  labelFill: '#262626',
+  labelFontSize: 24,
+  labelFontWeight: 600,
+  labelOffsetY: 8,
+  labelPlacement: 'center',
+  ports: [{
+    placement: 'right'
+  }, {
+    placement: 'left'
+  }],
+  radius: 8
+};
+var NodeStyle = {
+  fill: 'transparent',
+  labelPlacement: 'center',
+  labelFontSize: 16,
+  ports: [{
+    placement: 'right-bottom'
+  }, {
+    placement: 'left-bottom'
+  }]
+};
+var getNodeWidth = function getNodeWidth(nodeId, isRoot) {
+  var padding = isRoot ? 40 : 30;
+  var nodeStyle = isRoot ? RootNodeStyle : NodeStyle;
+  return measureText({
+    text: nodeId,
+    fontSize: nodeStyle.labelFontSize,
+    fontFamily: 'Gill Sans'
+  }) + padding;
+};
+var getNodeSize = function getNodeSize(nodeId, isRoot) {
+  var width = getNodeWidth(nodeId, isRoot);
+  var height = isRoot ? 36 : 32;
+  return [width, height];
+};
+var MindmapNode = /*#__PURE__*/function (_BaseNode) {
+  _inherits(MindmapNode, _BaseNode);
+  var _super = _createSuper(MindmapNode);
+  function MindmapNode() {
+    _classCallCheck(this, MindmapNode);
+    return _super.apply(this, arguments);
+  }
+  _createClass(MindmapNode, [{
+    key: "childrenData",
+    get: function get() {
+      return this.context.model.getChildrenData(this.id);
+    }
+  }, {
+    key: "rootId",
+    get: function get() {
+      return idOf(this.context.model.getRootsData()[0]);
+    }
+  }, {
+    key: "isShowCollapse",
+    value: function isShowCollapse(attributes) {
+      var collapsed = attributes.collapsed,
+        showIcon = attributes.showIcon;
+      return !collapsed && showIcon && this.childrenData.length > 0;
+    }
+  }, {
+    key: "getCollapseStyle",
+    value: function getCollapseStyle(attributes) {
+      var showIcon = attributes.showIcon,
+        color = attributes.color,
+        direction = attributes.direction;
+      if (!this.isShowCollapse(attributes)) return false;
+      var _this$getSize = this.getSize(attributes),
+        _this$getSize2 = _slicedToArray(_this$getSize, 2),
+        width = _this$getSize2[0],
+        height = _this$getSize2[1];
+      return {
+        backgroundFill: color,
+        backgroundHeight: 12,
+        backgroundWidth: 12,
+        cursor: 'pointer',
+        fill: '#fff',
+        fontFamily: 'iconfont',
+        fontSize: 8,
+        text: "\uE6E4",
+        textAlign: 'center',
+        transform: direction === 'left' ? [['rotate', 90]] : [['rotate', -90]],
+        visibility: showIcon ? 'visible' : 'hidden',
+        x: direction === 'left' ? -6 : width + 6,
+        y: height
+      };
+    }
+  }, {
+    key: "drawCollapseShape",
+    value: function drawCollapseShape() {}
+  }, {
+    key: "getCountStyle",
+    value: function getCountStyle(attributes) {
+      var collapsed = attributes.collapsed,
+        color = attributes.color,
+        direction = attributes.direction;
+      var count = this.context.model.getDescendantsData(this.id).length;
+      if (!collapsed || count === 0) return false;
+      var _this$getSize3 = this.getSize(attributes),
+        _this$getSize4 = _slicedToArray(_this$getSize3, 2),
+        width = _this$getSize4[0],
+        height = _this$getSize4[1];
+      return {
+        backgroundFill: color,
+        backgroundHeight: 12,
+        backgroundWidth: 12,
+        cursor: 'pointer',
+        fill: '#fff',
+        fontSize: 8,
+        text: count.toString(),
+        textAlign: 'center',
+        x: direction === 'left' ? -6 : width + 6,
+        y: height
+      };
+    }
+  }, {
+    key: "drawCountShape",
+    value: function drawCountShape() {}
+  }, {
+    key: "getAddStyle",
+    value: function getAddStyle(attributes) {
+      var collapsed = attributes.collapsed,
+        showIcon = attributes.showIcon,
+        direction = attributes.direction;
+      if (collapsed || !showIcon) return false;
+      var _this$getSize5 = this.getSize(attributes),
+        _this$getSize6 = _slicedToArray(_this$getSize5, 2),
+        width = _this$getSize6[0],
+        height = _this$getSize6[1];
+      var color = '#ddd';
+      var offsetX = this.isShowCollapse(attributes) ? 24 : 12;
+      var isRoot = this.id === this.rootId;
+      return {
+        backgroundFill: '#fff',
+        backgroundHeight: 12,
+        backgroundLineWidth: 1,
+        backgroundStroke: color,
+        backgroundWidth: 12,
+        cursor: 'pointer',
+        fill: color,
+        fontFamily: 'iconfont',
+        fontSize: 8,
+        text: "\uE664",
+        textAlign: 'center',
+        x: isRoot ? width + 12 : direction === 'left' ? -offsetX : width + offsetX,
+        y: isRoot ? height / 2 : height
+      };
+    }
+  }, {
+    key: "getAddBarStyle",
+    value: function getAddBarStyle(attributes) {
+      var collapsed = attributes.collapsed,
+        showIcon = attributes.showIcon,
+        direction = attributes.direction,
+        _attributes$color = attributes.color,
+        color = _attributes$color === void 0 ? '#1783FF' : _attributes$color;
+      if (collapsed || !showIcon) return false;
+      var _this$getSize7 = this.getSize(attributes),
+        _this$getSize8 = _slicedToArray(_this$getSize7, 2),
+        width = _this$getSize8[0],
+        height = _this$getSize8[1];
+      var offsetX = this.isShowCollapse(attributes) ? 12 : 0;
+      var isRoot = this.id === this.rootId;
+      var HEIGHT = 2;
+      var WIDTH = 6;
+      return {
+        cursor: 'pointer',
+        fill: direction === 'left' ? "linear-gradient(180deg, #fff 20%, ".concat(color, ")") : "linear-gradient(0deg, #fff 20%, ".concat(color, ")"),
+        height: HEIGHT,
+        width: WIDTH,
+        x: isRoot ? width : direction === 'left' ? -offsetX - WIDTH : width + offsetX,
+        y: isRoot ? height / 2 - HEIGHT / 2 : height - HEIGHT / 2,
+        zIndex: -1
+      };
+    }
+  }, {
+    key: "drawAddShape",
+    value: function drawAddShape() {}
+  }, {
+    key: "forwardEvent",
+    value: function forwardEvent() {}
+  }, {
+    key: "getKeyStyle",
+    value: function getKeyStyle(attributes) {
+      var _this$getSize9 = this.getSize(attributes),
+        _this$getSize10 = _slicedToArray(_this$getSize9, 2),
+        width = _this$getSize10[0],
+        height = _this$getSize10[1];
+      var keyShape = _get(_getPrototypeOf(MindmapNode.prototype), "getKeyStyle", this).call(this, attributes);
+      return _objectSpread({
+        width: width,
+        height: height
+      }, keyShape);
+    }
+  }, {
+    key: "drawKeyShape",
+    value: function drawKeyShape(attributes, container) {
+      var keyStyle = this.getKeyStyle(attributes);
+      // @ts-ignore
+      return this.upsert('key', Rect, keyStyle, container);
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var attributes = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : this.parsedAttributes;
+      var container = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : this;
+      _get(_getPrototypeOf(MindmapNode.prototype), "render", this).call(this, attributes, container);
+    }
+  }]);
+  return MindmapNode;
+}(BaseNode);
+_defineProperty(MindmapNode, "defaultStyleProps", _objectSpread(_objectSpread({}, BaseNode.defaultStyleProps), {}, {
+  showIcon: false
+}));
+var AssignColorByBranch = /*#__PURE__*/function (_BaseTransform) {
+  _inherits(AssignColorByBranch, _BaseTransform);
+  var _super2 = _createSuper(AssignColorByBranch);
+  function AssignColorByBranch(context, options) {
+    _classCallCheck(this, AssignColorByBranch);
+    return _super2.call(this, context, Object.assign({}, AssignColorByBranch.defaultOptions, options));
+  }
+  _createClass(AssignColorByBranch, [{
+    key: "beforeDraw",
+    value: function beforeDraw(input) {
+      var _this = this;
+      var nodes = this.context.model.getNodeData();
+      if (nodes.length === 0) return input;
+      var colorIndex = 0;
+      var dfs = function dfs(nodeId, color) {
+        var _node$children;
+        var node = nodes.find(function (datum) {
+          return datum.id == nodeId;
+        });
+        if (!node) return;
+        node.style || (node.style = {});
+        node.style.color = color || _this.options.colors[colorIndex++ % _this.options.colors.length];
+        (_node$children = node.children) === null || _node$children === void 0 || _node$children.forEach(function (childId) {
+          var _node$style;
+          return dfs(childId, (_node$style = node.style) === null || _node$style === void 0 ? void 0 : _node$style.color);
+        });
+      };
+      // @ts-ignore
+      nodes.filter(function (node) {
+        return node.depth === 1;
+      }).forEach(function (rootNode) {
+        return dfs(rootNode.id);
+      });
+      return input;
+    }
+  }]);
+  return AssignColorByBranch;
+}(BaseTransform);
+_defineProperty(AssignColorByBranch, "defaultOptions", {
+  colors: ['#1783FF', '#F08F56', '#D580FF', '#00C9C9', '#7863FF', '#DB9D0D', '#60C42D', '#FF80CA', '#2491B3', '#17C76F']
+});
+register(ExtensionCategory.NODE, 'mindmap', MindmapNode);
+register(ExtensionCategory.TRANSFORM, 'assign-color-by-branch', AssignColorByBranch);
+var getNodeSide = function getNodeSide(nodeData, parentData) {
+  if (!parentData) return 'center';
+  var nodePositionX = positionOf(nodeData)[0];
+  var parentPositionX = positionOf(parentData)[0];
+  return parentPositionX > nodePositionX ? 'left' : 'right';
+};
+function visTreeData2GraphData(data) {
+  return treeToGraphData(data, {
+    getNodeData: function getNodeData(datum, depth) {
+      datum.id = datum.name;
+      datum.depth = depth;
+      if (!datum.children) return datum;
+      var children = datum.children,
+        restDatum = _objectWithoutProperties(datum, _excluded);
+      return _objectSpread(_objectSpread({}, restDatum), {}, {
+        children: children.map(function (child) {
+          return child.name;
+        })
+      });
+    },
+    getEdgeData: function getEdgeData(source, target) {
+      return {
+        source: source.name,
+        target: target.name
+      };
+    }
+  });
+}
+export function MindMap(_x) {
+  return _MindMap.apply(this, arguments);
+}
+function _MindMap() {
+  _MindMap = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee(options) {
+    var data, width, height, dataParse, rootId;
+    return _regeneratorRuntime().wrap(function _callee$(_context) {
+      while (1) switch (_context.prev = _context.next) {
+        case 0:
+          data = options.data, width = options.width, height = options.height;
+          dataParse = visTreeData2GraphData(data);
+          rootId = data.name;
+          _context.next = 5;
+          return createGraph({
+            waitForRender: 300,
+            width: width,
+            height: height,
+            data: dataParse,
+            padding: 24,
+            autoFit: {
+              type: 'view'
+            },
+            node: {
+              type: 'mindmap',
+              // @ts-ignore
+              style: function style(d) {
+                var _d$style, _d$style2, _d$style3;
+                var direction = getNodeSide(d, this.getParentData(idOf(d), 'tree'));
+                var isRoot = idOf(d) === rootId;
+                var depth = d.depth;
+                return _objectSpread(_objectSpread({
+                  direction: direction,
+                  labelText: idOf(d),
+                  size: getNodeSize(idOf(d), isRoot),
+                  labelFontFamily: 'Gill Sans',
+                  lineWidth: 2,
+                  radius: 8,
+                  stroke: depth === 0 ? '#f1f4f5' : (_d$style = d.style) === null || _d$style === void 0 ? void 0 : _d$style.color,
+                  labelBackground: true,
+                  labelBackgroundFill: 'transparent',
+                  labelPadding: direction === 'left' ? [2, 0, 10, 40] : [2, 40, 10, 0]
+                }, isRoot ? RootNodeStyle : NodeStyle), {}, {
+                  fill: depth === 0 ? '#f1f4f5' : depth === 1 ? (_d$style2 = d.style) === null || _d$style2 === void 0 ? void 0 : _d$style2.color : 'transparent',
+                  labelFill: depth === 0 ? '#262626' : depth === 1 ? '#FFF' : (_d$style3 = d.style) === null || _d$style3 === void 0 ? void 0 : _d$style3.color,
+                  ports: [{
+                    placement: 'left'
+                  }, {
+                    placement: 'right'
+                  }]
+                });
+              }
+            },
+            edge: {
+              type: 'cubic-horizontal',
+              style: {
+                lineWidth: 1.5,
+                // @ts-ignore
+                stroke: function stroke(data) {
+                  // @ts-ignore
+                  return this.getNodeData(data.target).depth > 1 ?
+                  // @ts-ignore
+                  this.getNodeData(data.target).style.color : '#99ADD1';
+                }
+              }
+            },
+            layout: {
+              type: 'mindmap',
+              direction: 'H',
+              getHeight: function getHeight() {
+                return 30;
+              },
+              getWidth: function getWidth(node) {
+                return getNodeWidth(node.id, node.id === rootId);
+              },
+              getVGap: function getVGap() {
+                return 14;
+              },
+              getHGap: function getHGap() {
+                return 64;
+              },
+              animation: false
+            },
+            transforms: ['assign-color-by-branch'],
+            animation: false
+          });
+        case 5:
+          return _context.abrupt("return", _context.sent);
+        case 6:
+        case "end":
+          return _context.stop();
+      }
+    }, _callee);
+  }));
+  return _MindMap.apply(this, arguments);
+}

package/dist/esm/ssr/network-graph.d.ts

@@ -0,0 +1,6 @@
+import { type NetworkGraphProps } from '../export';
+import { type BaseChartConfig } from './type';
+export type NetworkGraphOptions = BaseChartConfig & {
+    type: 'network-graph';
+} & NetworkGraphProps;
+export declare function NetworkGraph(options: NetworkGraphOptions): Promise<import("@antv/g6-ssr").Graph>;

package/dist/esm/ssr/network-graph.js

@@ -0,0 +1,79 @@
+import _regeneratorRuntime from "@babel/runtime/helpers/esm/regeneratorRuntime";
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import _asyncToGenerator from "@babel/runtime/helpers/esm/asyncToGenerator";
+import { createGraph } from '@antv/g6-ssr';
+export function NetworkGraph(_x) {
+  return _NetworkGraph.apply(this, arguments);
+}
+function _NetworkGraph() {
+  _NetworkGraph = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee(options) {
+    var data, _options$width, width, _options$height, height, graphData;
+    return _regeneratorRuntime().wrap(function _callee$(_context) {
+      while (1) switch (_context.prev = _context.next) {
+        case 0:
+          data = options.data, _options$width = options.width, width = _options$width === void 0 ? 600 : _options$width, _options$height = options.height, height = _options$height === void 0 ? 400 : _options$height;
+          graphData = {
+            nodes: data.nodes.map(function (node) {
+              return _objectSpread(_objectSpread({}, node), {}, {
+                id: node.name
+              });
+            }),
+            edges: data.edges.map(function (edge) {
+              return _objectSpread(_objectSpread({}, edge), {}, {
+                id: "".concat(edge.source, "-").concat(edge.target)
+              });
+            })
+          };
+          _context.next = 4;
+          return createGraph({
+            data: graphData,
+            width: width,
+            height: height,
+            devicePixelRatio: 3,
+            autoFit: 'view',
+            padding: 20,
+            animation: false,
+            node: {
+              type: 'circle',
+              style: {
+                size: 20,
+                // @ts-ignore
+                labelText: function labelText(d) {
+                  return d.name;
+                },
+                labelSize: 10,
+                labelFontSize: 10,
+                labelBackground: true
+              }
+            },
+            edge: {
+              style: {
+                // @ts-ignore
+                labelText: function labelText(d) {
+                  return d.name;
+                },
+                labelFontSize: 10,
+                labelBackground: true,
+                endArrow: true
+              },
+              animation: {
+                enter: false
+              }
+            },
+            layout: {
+              type: 'force-atlas2',
+              preventOverlap: true,
+              kr: 600
+            },
+            transforms: ['process-parallel-edges']
+          });
+        case 4:
+          return _context.abrupt("return", _context.sent);
+        case 5:
+        case "end":
+          return _context.stop();
+      }
+    }, _callee);
+  }));
+  return _NetworkGraph.apply(this, arguments);
+}

package/dist/esm/ssr/pie.d.ts

@@ -0,0 +1,6 @@
+import { type PieProps } from '../export';
+import { type BaseChartConfig } from './type';
+export type PieOptions = BaseChartConfig & {
+    type: 'pie';
+} & PieProps;
+export declare function Pie(options: PieOptions): Promise<import("@antv/g2-ssr").Chart>;

package/dist/esm/ssr/pie.js

@@ -0,0 +1,66 @@
+import _regeneratorRuntime from "@babel/runtime/helpers/esm/regeneratorRuntime";
+import _asyncToGenerator from "@babel/runtime/helpers/esm/asyncToGenerator";
+import { createChart } from '@antv/g2-ssr';
+export function Pie(_x) {
+  return _Pie.apply(this, arguments);
+}
+function _Pie() {
+  _Pie = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee(options) {
+    var data, title, width, height, innerRadius;
+    return _regeneratorRuntime().wrap(function _callee$(_context) {
+      while (1) switch (_context.prev = _context.next) {
+        case 0:
+          data = options.data, title = options.title, width = options.width, height = options.height, innerRadius = options.innerRadius;
+          _context.next = 3;
+          return createChart({
+            type: 'interval',
+            title: title,
+            width: width,
+            height: height,
+            data: data,
+            encode: {
+              y: 'value',
+              color: 'category'
+            },
+            transform: [{
+              type: 'stackY'
+            }],
+            coordinate: {
+              type: 'theta',
+              outerRadius: 0.95,
+              innerRadius: innerRadius
+            },
+            style: {
+              radius: 4,
+              stroke: '#fff',
+              lineWidth: 1
+            },
+            labels: [{
+              text: function text(data) {
+                return "".concat(data.category, ": ").concat(data.value);
+              },
+              position: 'outside',
+              radius: 0.85,
+              fontSize: 12
+            }],
+            legend: {
+              color: {
+                position: 'bottom',
+                layout: {
+                  justifyContent: 'center'
+                }
+              }
+            },
+            animate: false,
+            axis: false
+          });
+        case 3:
+          return _context.abrupt("return", _context.sent);
+        case 4:
+        case "end":
+          return _context.stop();
+      }
+    }, _callee);
+  }));
+  return _Pie.apply(this, arguments);
+}

package/dist/esm/ssr/radar.d.ts

@@ -0,0 +1,6 @@
+import { type RadarProps } from '../export';
+import { type BaseChartConfig } from './type';
+export type RadarOptions = BaseChartConfig & {
+    type: 'radar';
+} & RadarProps;
+export declare function Radar(options: RadarOptions): Promise<import("@antv/g2-ssr").Chart>;

package/dist/esm/ssr/radar.js

@@ -0,0 +1,88 @@
+import _regeneratorRuntime from "@babel/runtime/helpers/esm/regeneratorRuntime";
+import _asyncToGenerator from "@babel/runtime/helpers/esm/asyncToGenerator";
+import { createChart } from '@antv/g2-ssr';
+export function Radar(_x) {
+  return _Radar.apply(this, arguments);
+}
+function _Radar() {
+  _Radar = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee(options) {
+    var _;
+    var data, title, width, height, hasGroupField, encode;
+    return _regeneratorRuntime().wrap(function _callee$(_context) {
+      while (1) switch (_context.prev = _context.next) {
+        case 0:
+          data = options.data, title = options.title, width = options.width, height = options.height;
+          hasGroupField = ((_ = (data || [])[0]) === null || _ === void 0 ? void 0 : _.group) !== undefined;
+          encode = {};
+          if (hasGroupField) {
+            encode = {
+              x: 'name',
+              y: 'value',
+              color: 'group'
+            };
+          } else {
+            encode = {
+              x: 'name',
+              y: 'value'
+            };
+          }
+          _context.next = 6;
+          return createChart({
+            title: title,
+            type: 'view',
+            width: width,
+            data: data,
+            height: height,
+            children: [{
+              axis: {
+                x: {
+                  grid: true,
+                  line: true
+                },
+                y: {
+                  zIndex: 1,
+                  title: false,
+                  line: true,
+                  nice: true
+                }
+              },
+              // @ts-ignore
+              coordinateType: 'polar',
+              scale: {
+                x: {
+                  padding: 0.5,
+                  align: 0
+                },
+                y: {
+                  nice: true
+                }
+              },
+              coordinate: {
+                type: 'polar'
+              },
+              encode: encode,
+              type: 'line'
+            }, {
+              style: {
+                fillOpacity: 0.5
+              },
+              encode: encode,
+              scale: {
+                x: {
+                  padding: 0.5,
+                  align: 0
+                }
+              },
+              type: 'area'
+            }]
+          });
+        case 6:
+          return _context.abrupt("return", _context.sent);
+        case 7:
+        case "end":
+          return _context.stop();
+      }
+    }, _callee);
+  }));
+  return _Radar.apply(this, arguments);
+}

package/dist/esm/ssr/scatter.d.ts

@@ -0,0 +1,6 @@
+import { type ScatterProps } from '../export';
+import { type BaseChartConfig } from './type';
+export type ScatterOptions = BaseChartConfig & {
+    type: 'scatter';
+} & ScatterProps;
+export declare function Scatter(options: ScatterOptions): Promise<import("@antv/g2-ssr").Chart>;