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

package/dist/esm/ssr/dual-axes.js

@@ -0,0 +1,122 @@
+import _regeneratorRuntime from "@babel/runtime/helpers/esm/regeneratorRuntime";
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+import _asyncToGenerator from "@babel/runtime/helpers/esm/asyncToGenerator";
+var _excluded = ["type", "axisYTitle"];
+import { createChart } from '@antv/g2-ssr';
+export function DualAxes(_x) {
+  return _DualAxes.apply(this, arguments);
+}
+function _DualAxes() {
+  _DualAxes = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee(options) {
+    var series, categories, title, width, height, ChartType, transform, config;
+    return _regeneratorRuntime().wrap(function _callee$(_context) {
+      while (1) switch (_context.prev = _context.next) {
+        case 0:
+          transform = function _transform(series, categories) {
+            var newChildren = series.map(function (item) {
+              var type = item.type,
+                axisYTitle = item.axisYTitle,
+                others = _objectWithoutProperties(item, _excluded);
+              var baseConfig = _objectSpread(_objectSpread({}, others), {}, {
+                axis: {
+                  y: {
+                    title: axisYTitle
+                  }
+                },
+                encode: {
+                  x: 'category',
+                  y: axisYTitle,
+                  color: function color() {
+                    return axisYTitle;
+                  }
+                },
+                legend: {
+                  color: {
+                    itemMarker: function itemMarker(v) {
+                      if (v === axisYTitle) return 'smooth';
+                      return 'rect';
+                    }
+                  }
+                },
+                data: undefined
+              });
+              if (type === ChartType.Column) {
+                return _objectSpread(_objectSpread({}, baseConfig), {}, {
+                  type: 'interval'
+                });
+              }
+              if (type === ChartType.Line) {
+                return _objectSpread(_objectSpread({}, baseConfig), {}, {
+                  type: type,
+                  axis: {
+                    y: {
+                      position: 'right',
+                      title: axisYTitle
+                    }
+                  },
+                  encode: {
+                    x: 'category',
+                    y: axisYTitle,
+                    shape: 'smooth',
+                    color: function color() {
+                      return axisYTitle;
+                    }
+                  },
+                  style: {
+                    lineWidth: 2,
+                    stroke: '#5AD8A6'
+                  },
+                  scale: {
+                    y: {
+                      independent: true
+                    }
+                  }
+                });
+              }
+              return baseConfig;
+            });
+            var newData = categories.map(function (item, index) {
+              var temp = {
+                category: item
+              };
+              series.forEach(function (s, i) {
+                var defaultYField = s.axisYTitle || "value_".concat(i + 1);
+                temp[defaultYField] = s.data[index];
+              });
+              return temp;
+            });
+            var legendTypeList = series.map(function (item) {
+              return item.type === ChartType.Line ? 'smooth' : 'rect';
+            });
+            return {
+              children: newChildren,
+              data: newData,
+              legendTypeList: legendTypeList
+            };
+          };
+          series = options.series, categories = options.categories, title = options.title, width = options.width, height = options.height;
+          ChartType = /*#__PURE__*/function (ChartType) {
+            ChartType["Column"] = "column";
+            ChartType["Line"] = "line";
+            return ChartType;
+          }({});
+          config = transform(series, categories);
+          _context.next = 6;
+          return createChart(_objectSpread({
+            type: 'view',
+            autoFit: true,
+            title: title,
+            width: width,
+            height: height
+          }, config));
+        case 6:
+          return _context.abrupt("return", _context.sent);
+        case 7:
+        case "end":
+          return _context.stop();
+      }
+    }, _callee);
+  }));
+  return _DualAxes.apply(this, arguments);
+}

package/dist/esm/ssr/fishbone-diagram.d.ts

@@ -0,0 +1,6 @@
+import { type FishboneDiagramProps } from '../export';
+import { type BaseChartConfig } from './type';
+export type FishboneDiagramOptions = BaseChartConfig & {
+    type: 'fishbone-diagram';
+} & FishboneDiagramProps;
+export declare function FishboneDiagram(options: FishboneDiagramOptions): Promise<import("@antv/g6-ssr").Graph>;

package/dist/esm/ssr/fishbone-diagram.js

@@ -0,0 +1,195 @@
+import _regeneratorRuntime from "@babel/runtime/helpers/esm/regeneratorRuntime";
+import _asyncToGenerator from "@babel/runtime/helpers/esm/asyncToGenerator";
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+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 _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+var _excluded = ["children"];
+import { BaseTransform, ExtensionCategory, treeToGraphData } from '@antv/g6';
+import { createGraph, register } from '@antv/g6-ssr';
+import { createCanvas } from 'canvas';
+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 AssignColorByBranch = /*#__PURE__*/function (_BaseTransform) {
+  _inherits(AssignColorByBranch, _BaseTransform);
+  var _super = _createSuper(AssignColorByBranch);
+  function AssignColorByBranch(context, options) {
+    _classCallCheck(this, AssignColorByBranch);
+    return _super.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.TRANSFORM, 'assign-color-by-branch', AssignColorByBranch);
+var getNodeSize = function getNodeSize(id, depth) {
+  var FONT_FAMILY = 'system-ui, sans-serif';
+  return depth === 0 ? [measureText({
+    text: id,
+    fontSize: 24,
+    fontWeight: 'bold',
+    fontFamily: FONT_FAMILY
+  }) + 80, 70] : depth === 1 ? [measureText({
+    text: id,
+    fontSize: 18,
+    fontFamily: FONT_FAMILY
+  }) + 50, 42] : [2, 30];
+};
+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 FishboneDiagram(_x) {
+  return _FishboneDiagram.apply(this, arguments);
+}
+function _FishboneDiagram() {
+  _FishboneDiagram = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee(options) {
+    var data, _options$width, width, _options$height, height, dataParse;
+    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;
+          dataParse = visTreeData2GraphData(data);
+          _context.next = 4;
+          return createGraph({
+            autoFit: {
+              type: 'view',
+              options: {
+                when: 'overflow',
+                direction: 'x'
+              }
+            },
+            width: width,
+            height: height,
+            data: dataParse,
+            padding: 20,
+            node: {
+              type: 'rect',
+              // @ts-ignore
+              style: function style(d) {
+                var style = {
+                  radius: 8,
+                  size: getNodeSize(d.id, d.depth),
+                  labelText: d.id,
+                  labelPlacement: 'left',
+                  labelFontFamily: 'Gill Sans'
+                };
+                if (d.depth === 0) {
+                  Object.assign(style, {
+                    fill: '#EFF0F0',
+                    labelFill: '#262626',
+                    labelFontWeight: 'bold',
+                    labelFontSize: 24,
+                    labelOffsetY: 4,
+                    labelPlacement: 'center',
+                    labelLineHeight: 24
+                  });
+                } else if (d.depth === 1) {
+                  var _d$style;
+                  Object.assign(style, {
+                    labelFontSize: 18,
+                    labelFill: '#fff',
+                    labelFillOpacity: 0.9,
+                    labelOffsetY: 5,
+                    labelPlacement: 'center',
+                    fill: (_d$style = d.style) === null || _d$style === void 0 ? void 0 : _d$style.color
+                  });
+                } else {
+                  Object.assign(style, {
+                    fill: 'transparent',
+                    labelFontSize: 16,
+                    labeFill: '#262626'
+                  });
+                }
+                return style;
+              }
+            },
+            edge: {
+              type: 'polyline',
+              style: {
+                lineWidth: 3,
+                // @ts-ignore
+                stroke: function stroke(data) {
+                  // @ts-ignore
+                  return this.getNodeData(data.target).style.color || '#99ADD1';
+                }
+              }
+            },
+            transforms: ['assign-color-by-branch'],
+            layout: {
+              type: 'fishbone',
+              direction: 'RL',
+              hGap: 40,
+              vGap: 60
+            }
+          });
+        case 4:
+          return _context.abrupt("return", _context.sent);
+        case 5:
+        case "end":
+          return _context.stop();
+      }
+    }, _callee);
+  }));
+  return _FishboneDiagram.apply(this, arguments);
+}

package/dist/esm/ssr/flow-diagram.d.ts

@@ -0,0 +1,6 @@
+import { type FlowDiagramProps } from '../export';
+import { type BaseChartConfig } from './type';
+export type FlowDiagramOptions = BaseChartConfig & {
+    type: 'flow-diagram';
+} & FlowDiagramProps;
+export declare function FlowDiagram(options: FlowDiagramOptions): Promise<import("@antv/g6-ssr").Graph>;

package/dist/esm/ssr/flow-diagram.js

@@ -0,0 +1,89 @@
+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 FlowDiagram(_x) {
+  return _FlowDiagram.apply(this, arguments);
+}
+function _FlowDiagram() {
+  _FlowDiagram = _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: 'rect',
+              style: {
+                size: function size(d) {
+                  return [d.name.length * 15 + 30, 35];
+                },
+                radius: 6,
+                // @ts-ignore
+                iconText: function iconText(d) {
+                  return d.name;
+                },
+                iconFontSize: 12,
+                iconFontWeight: 800
+              }
+            },
+            edge: {
+              type: 'polyline',
+              style: {
+                lineWidth: 2,
+                radius: 10,
+                stroke: '#99ADD1',
+                endArrow: true,
+                // @ts-ignore
+                labelText: function labelText(d) {
+                  return d.name;
+                },
+                labelFill: '#555555',
+                labelFontWeight: 800,
+                labelBackground: true,
+                labelBackgroundFill: 'rgba(255,255,255,0.6)',
+                labelBackgroundOpacity: 1,
+                labelBackgroundLineWidth: 2,
+                labelPadding: [2, 5],
+                labelBackgroundRadius: 2,
+                router: {
+                  type: 'orth'
+                }
+              }
+            },
+            layout: {
+              type: 'dagre',
+              rankdir: 'LR'
+            }
+          });
+        case 4:
+          return _context.abrupt("return", _context.sent);
+        case 5:
+        case "end":
+          return _context.stop();
+      }
+    }, _callee);
+  }));
+  return _FlowDiagram.apply(this, arguments);
+}

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

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

package/dist/esm/ssr/histogram.js

@@ -0,0 +1,56 @@
+import _regeneratorRuntime from "@babel/runtime/helpers/esm/regeneratorRuntime";
+import _asyncToGenerator from "@babel/runtime/helpers/esm/asyncToGenerator";
+import { createChart } from '@antv/g2-ssr';
+export function Histogram(_x) {
+  return _Histogram.apply(this, arguments);
+}
+function _Histogram() {
+  _Histogram = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee(options) {
+    var data, title, width, height, axisYTitle, axisXTitle, binNumber;
+    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, axisYTitle = options.axisYTitle, axisXTitle = options.axisXTitle, binNumber = options.binNumber; // TODO 有问题
+          _context.next = 3;
+          return createChart({
+            type: 'interval',
+            width: width,
+            height: height,
+            data: data,
+            title: title,
+            encode: {
+              x: function x(d) {
+                return d;
+              },
+              y: 'count'
+            },
+            transform: [{
+              type: 'binX',
+              y: 'count',
+              thresholds: binNumber
+            }],
+            style: {
+              minHeight: 1,
+              columnWidthRatio: 1,
+              inset: 0.5
+            },
+            axis: {
+              x: {
+                title: axisXTitle
+              },
+              y: {
+                title: axisYTitle
+              }
+            },
+            animate: false
+          });
+        case 3:
+          return _context.abrupt("return", _context.sent);
+        case 4:
+        case "end":
+          return _context.stop();
+      }
+    }, _callee);
+  }));
+  return _Histogram.apply(this, arguments);
+}

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

@@ -0,0 +1,2 @@
+import type { Options } from './type';
+export declare function render(options: Options): Promise<import("@antv/g2-ssr").Chart>;

package/dist/esm/ssr/index.js

@@ -0,0 +1,68 @@
+import _regeneratorRuntime from "@babel/runtime/helpers/esm/regeneratorRuntime";
+import _asyncToGenerator from "@babel/runtime/helpers/esm/asyncToGenerator";
+import { Area } from "./area";
+import { Bar } from "./bar";
+import { Column } from "./column";
+import { DualAxes } from "./dual-axes";
+import { FishboneDiagram } from "./fishbone-diagram";
+import { FlowDiagram } from "./flow-diagram";
+import { Histogram } from "./histogram";
+import { Line } from "./line";
+import { MindMap } from "./mind-map";
+import { NetworkGraph } from "./network-graph";
+import { Pie } from "./pie";
+import { Radar } from "./radar";
+import { Scatter } from "./scatter";
+import { Treemap } from "./treemap";
+import { WordCloud } from "./word-cloud";
+export function render(_x) {
+  return _render.apply(this, arguments);
+}
+function _render() {
+  _render = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee(options) {
+    return _regeneratorRuntime().wrap(function _callee$(_context) {
+      while (1) switch (_context.prev = _context.next) {
+        case 0:
+          _context.t0 = options.type;
+          _context.next = _context.t0 === 'line' ? 3 : _context.t0 === 'column' ? 4 : _context.t0 === 'pie' ? 5 : _context.t0 === 'area' ? 6 : _context.t0 === 'bar' ? 7 : _context.t0 === 'histogram' ? 8 : _context.t0 === 'scatter' ? 9 : _context.t0 === 'word-cloud' ? 10 : _context.t0 === 'treemap' ? 11 : _context.t0 === 'dual-axes' ? 12 : _context.t0 === 'radar' ? 13 : _context.t0 === 'mind-map' ? 14 : _context.t0 === 'network-graph' ? 15 : _context.t0 === 'flow-diagram' ? 16 : _context.t0 === 'fishbone-diagram' ? 17 : 18;
+          break;
+        case 3:
+          return _context.abrupt("return", Line(options));
+        case 4:
+          return _context.abrupt("return", Column(options));
+        case 5:
+          return _context.abrupt("return", Pie(options));
+        case 6:
+          return _context.abrupt("return", Area(options));
+        case 7:
+          return _context.abrupt("return", Bar(options));
+        case 8:
+          return _context.abrupt("return", Histogram(options));
+        case 9:
+          return _context.abrupt("return", Scatter(options));
+        case 10:
+          return _context.abrupt("return", WordCloud(options));
+        case 11:
+          return _context.abrupt("return", Treemap(options));
+        case 12:
+          return _context.abrupt("return", DualAxes(options));
+        case 13:
+          return _context.abrupt("return", Radar(options));
+        case 14:
+          return _context.abrupt("return", MindMap(options));
+        case 15:
+          return _context.abrupt("return", NetworkGraph(options));
+        case 16:
+          return _context.abrupt("return", FlowDiagram(options));
+        case 17:
+          return _context.abrupt("return", FishboneDiagram(options));
+        case 18:
+          throw new Error("Unknown chart type: ".concat(options.type));
+        case 19:
+        case "end":
+          return _context.stop();
+      }
+    }, _callee);
+  }));
+  return _render.apply(this, arguments);
+}

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

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

package/dist/esm/ssr/line.js

@@ -0,0 +1,61 @@
+import _regeneratorRuntime from "@babel/runtime/helpers/esm/regeneratorRuntime";
+import _asyncToGenerator from "@babel/runtime/helpers/esm/asyncToGenerator";
+import { createChart } from '@antv/g2-ssr';
+export function Line(_x) {
+  return _Line.apply(this, arguments);
+}
+function _Line() {
+  _Line = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee(options) {
+    var _;
+    var data, title, _options$width, width, _options$height, height, axisYTitle, axisXTitle, hasGroupField, encode;
+    return _regeneratorRuntime().wrap(function _callee$(_context) {
+      while (1) switch (_context.prev = _context.next) {
+        case 0:
+          data = options.data, title = options.title, _options$width = options.width, width = _options$width === void 0 ? 600 : _options$width, _options$height = options.height, height = _options$height === void 0 ? 400 : _options$height, axisYTitle = options.axisYTitle, axisXTitle = options.axisXTitle;
+          hasGroupField = ((_ = (data || [])[0]) === null || _ === void 0 ? void 0 : _.group) !== undefined;
+          encode = {};
+          if (hasGroupField) {
+            encode = {
+              x: 'time',
+              y: 'value',
+              color: 'group'
+            };
+          } else {
+            encode = {
+              x: 'time',
+              y: 'value'
+            };
+          }
+          _context.next = 6;
+          return createChart({
+            type: 'view',
+            title: title,
+            data: data,
+            width: width,
+            height: height,
+            encode: encode,
+            style: {
+              minHeight: 1
+            },
+            axis: {
+              y: {
+                title: axisYTitle || false
+              },
+              x: {
+                title: axisXTitle || false
+              }
+            },
+            children: [{
+              type: 'line'
+            }]
+          });
+        case 6:
+          return _context.abrupt("return", _context.sent);
+        case 7:
+        case "end":
+          return _context.stop();
+      }
+    }, _callee);
+  }));
+  return _Line.apply(this, arguments);
+}

package/dist/esm/ssr/mind-map.d.ts

@@ -0,0 +1,6 @@
+import { type MindMapProps } from '../export';
+import { type BaseChartConfig } from './type';
+export type MindMapOptions = BaseChartConfig & {
+    type: 'mind-map';
+} & MindMapProps;
+export declare function MindMap(options: MindMapOptions): Promise<import("@antv/g6-ssr").Graph>;