@antv/gpt-vis 0.0.1

package/README.md

@@ -0,0 +1,96 @@
+# GPT-Vis
+
+为各种 LLM Agent 提供卡片服务的可视化资产和协议。
+
+## ⏬ 安装
+
+```shell
+$ npm install @antv/gpt-vis@0.x --save
+```
+
+## 🌰 示例
+
+### 📦 组件中使用
+
+```tsx | pure
+import React from 'react';
+import { Pie } from '@antv/gpt-vis';
+
+const data = [
+  { name: '分类一', value: 27 },
+  { name: '分类二', value: 25 },
+  { name: '分类三', value: 18 },
+  { name: '分类四', value: 15 },
+  { name: '分类五', value: 10 },
+  { name: '其他', value: 5 },
+];
+
+export default () => {
+  return <Pie data={data} />;
+};
+```
+
+### 📝 Markdown 中使用
+
+#### 方式一：使用 MarkdownVis 组件
+
+```tsx | pure
+import React from 'react';
+import { MarkdownVis } from '@antv/gpt-vis';
+
+const markdownContent = `
+# GPT-VIS \n\nComponents for GPTs, generative AI, and LLM projects. Not only UI Components.
+
+\`\`\`vis-chart
+{
+  "type": "pie",
+  "data": [
+    { "name": "分类一", "value": 27 },
+    { "name": "分类二", "value": 25 },
+    { "name": "分类三", "value": 18 },
+    { "name": "分类四", "value": 15 },
+    { "name": "分类五", "value": 10 },
+    { "name": "其他", "value": 5 }
+  ]
+}
+\`\`\`
+`;
+
+export default () => {
+  return <MarkdownVis>{markdownContent}</MarkdownVis>;
+};
+```
+
+#### 方式二：扩展 react-markdown 使用
+
+```tsx | pure
+import React from 'react';
+import Markdown from 'react-markdown';
+import { withDefaultChartCode } from '@antv/gpt-vis';
+
+const markdownContent = `
+# GPT-VIS \n\nComponents for GPTs, generative AI, and LLM projects. Not only UI Components.
+
+\`\`\`vis-chart
+{
+  "type": "pie",
+  "data": [
+    { "name": "分类一", "value": 27 },
+    { "name": "分类二", "value": 25 },
+    { "name": "分类三", "value": 18 },
+    { "name": "分类四", "value": 15 },
+    { "name": "分类五", "value": 10 },
+    { "name": "其他", "value": 5 }
+  ]
+}
+\`\`\`
+`;
+
+const CodeBlock = withDefaultChartCode();
+
+export default () => {
+  return (
+    <Markdown components={{ code: CodeBlock }}>{markdownContent}</Markdown>
+  );
+};
+```

package/dist/Area/index.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import { StackableChartProps } from '../types';
+export type AreaProps = StackableChartProps;
+declare const Area: (props: AreaProps) => React.JSX.Element;
+export default Area;

package/dist/Area/index.js

@@ -0,0 +1,40 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+// 引入必要的包
+import { Area as ADCArea } from '@ant-design/plots';
+import React from 'react';
+// 假如你有类型需要引入
+
+var Area = function Area(props) {
+  var _props$data = props.data,
+    data = _props$data === void 0 ? [] : _props$data,
+    _props$xField = props.xField,
+    xField = _props$xField === void 0 ? 'x' : _props$xField,
+    _props$yField = props.yField,
+    yField = _props$yField === void 0 ? 'y' : _props$yField,
+    stackField = props.stackField,
+    className = props.className,
+    style = props.style;
+
+  // 如果有 stackField，则使用 seriesField 进行分组显示，否则不分组
+  var stackConfig = stackField ? {
+    colorField: stackField,
+    isStack: true
+  } : {};
+  var config = _objectSpread({
+    data: data,
+    xField: xField,
+    yField: yField,
+    tooltip: function tooltip(d) {
+      return {
+        name: d[xField],
+        value: d[yField]
+      };
+    }
+  }, stackConfig);
+  return /*#__PURE__*/React.createElement(ADCArea, _extends({
+    className: className,
+    containerStyle: _objectSpread({}, style)
+  }, config));
+};
+export default Area;

package/dist/ChartCodeRender/index.d.ts

@@ -0,0 +1,16 @@
+import React from 'react';
+import './index.less';
+import { ChartComponents, CodeBlockComponent, ExtraRenderers, WithChartCodeOptions } from './type';
+export declare const withCodeBlock: (options: {
+    components: ChartComponents;
+    extraRenderers?: ExtraRenderers;
+    debug?: boolean;
+    loadingTimeout?: number;
+}) => CodeBlockComponent;
+export declare const withChartCode: (options: WithChartCodeOptions) => keyof JSX.IntrinsicElements | import("hast-util-to-jsx-runtime/lib/components").Component<React.ClassAttributes<HTMLElement> & React.HTMLAttributes<HTMLElement> & import("hast-util-to-jsx-runtime/lib/components").ExtraProps> | undefined;
+/**
+ * Includes built-in chart components such as line charts, pie charts, etc.
+ * @param componentsArray
+ * @returns
+ */
+export declare const withDefaultChartCode: (options?: Partial<WithChartCodeOptions>) => keyof JSX.IntrinsicElements | import("hast-util-to-jsx-runtime/lib/components").Component<React.ClassAttributes<HTMLElement> & React.HTMLAttributes<HTMLElement> & import("hast-util-to-jsx-runtime/lib/components").ExtraProps> | undefined;

package/dist/ChartCodeRender/index.js

@@ -0,0 +1,120 @@
+import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["children", "className", "node"];
+import { LoadingOutlined } from '@ant-design/icons';
+import { get } from 'lodash-es';
+import React, { useRef, useState } from 'react';
+import { DEFAULT_CHART_COMPONENTS } from "../constants";
+import "./index.less";
+var Loading = function Loading() {
+  return /*#__PURE__*/React.createElement("div", {
+    className: "gpt-vis-loading"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "gpt-vis-loading-icon"
+  }, /*#__PURE__*/React.createElement(LoadingOutlined, {
+    style: {
+      fontSize: '24px',
+      color: 'rgb(56, 177, 246)'
+    }
+  })), /*#__PURE__*/React.createElement("p", null, "\u6570\u636E\u751F\u6210\u4E2D"));
+};
+export var withCodeBlock = function withCodeBlock(options) {
+  // Render code block component
+  return function CodeBlock(props) {
+    var _className$match;
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    var children = props.children,
+      _props$className = props.className,
+      className = _props$className === void 0 ? '' : _props$className,
+      node = props.node,
+      rest = _objectWithoutProperties(props, _excluded);
+    var content = String(children).trim();
+    var isVisChart = className.includes('language-vis-chart');
+    var components = options.components,
+      extraRenderers = options.extraRenderers,
+      debug = options.debug,
+      _options$loadingTimeo = options.loadingTimeout,
+      loadingTimeout = _options$loadingTimeo === void 0 ? 5000 : _options$loadingTimeo;
+    var timeoutRef = useRef();
+    var _useState = useState(true),
+      _useState2 = _slicedToArray(_useState, 2),
+      loading = _useState2[0],
+      setLoading = _useState2[1];
+
+    // If the code block is a VisChart, render the corresponding chart component
+    if (isVisChart) {
+      var chartJson;
+      try {
+        chartJson = JSON.parse(content);
+      } catch (e) {
+        if (timeoutRef.current) {
+          clearTimeout(timeoutRef.current);
+          if (debug) {
+            console.log('GPT-Vis withChartCode parse content timeout');
+          }
+        }
+        timeoutRef.current = setTimeout(function () {
+          setLoading(false);
+        }, loadingTimeout);
+        return loading ? /*#__PURE__*/React.createElement(Loading, null) : /*#__PURE__*/React.createElement("code", null, content.toString());
+      }
+      var _chartJson = chartJson,
+        type = _chartJson.type;
+      var ChartComponent = components[type];
+
+      // debug mode print chartJson
+      if (debug) {
+        console.log('GPT-Vis withChartCode get chartJson parse from vis-chart code block', chartJson);
+      }
+
+      // If the chart type is not supported, display an error message
+      if (!ChartComponent) {
+        return /*#__PURE__*/React.createElement("code", null, "Chart type \"".concat(type, "\" is not supported."));
+      }
+
+      // Render the supported chart component with data
+
+      return /*#__PURE__*/React.createElement("div", {
+        className: "gpt-vis"
+      }, /*#__PURE__*/React.createElement(ChartComponent, chartJson));
+    }
+
+    // If the code block math extraRenderer  languageName, the corresponding extraRenderers component
+    var languageName = ((_className$match = className.match(/language-(.*)/)) === null || _className$match === void 0 ? void 0 : _className$match[1]) || '';
+    var ExtraRendererComponent = extraRenderers && extraRenderers[languageName];
+    if (ExtraRendererComponent) {
+      return /*#__PURE__*/React.createElement(ExtraRendererComponent, props);
+    }
+
+    // If the code block is not a VisChart, render plain code
+    return /*#__PURE__*/React.createElement("code", _extends({}, rest, {
+      className: className
+    }), children);
+  };
+};
+
+// Create a higher-order component (HOC) with chart code
+export var withChartCode = function withChartCode(options) {
+  var _options$components;
+  // Flatten the components array into a single object
+  var components = ((_options$components = options.components) === null || _options$components === void 0 ? void 0 : _options$components.reduce(function (acc, obj) {
+    return _objectSpread(_objectSpread({}, acc), obj);
+  }, {})) || [];
+  return withCodeBlock(_objectSpread(_objectSpread({}, options), {}, {
+    components: components
+  }));
+};
+
+/**
+ * Includes built-in chart components such as line charts, pie charts, etc.
+ * @param componentsArray
+ * @returns
+ */
+export var withDefaultChartCode = function withDefaultChartCode(options) {
+  return withChartCode(_objectSpread(_objectSpread({}, options), {}, {
+    components: [DEFAULT_CHART_COMPONENTS].concat(_toConsumableArray(get(options, 'components', [])))
+  }));
+};

package/dist/ChartCodeRender/index.less

@@ -0,0 +1,19 @@
+.gpt-vis {
+  min-width: 600px;
+  max-width: 100%;
+}
+
+.gpt-vis-loading {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  width: 400px;
+  height: 400px;
+  background-image: linear-gradient(135deg, #e3f3ff 0%, #f1eeff 100%);
+  color: rgba(0, 0, 0, 88%);
+
+  &-icon {
+    margin-bottom: 6px;
+  }
+}

package/dist/ChartCodeRender/type.d.ts

@@ -0,0 +1,30 @@
+import { FC } from 'react';
+import { Components, ExtraProps } from 'react-markdown';
+import { BaseChartProps } from '../types';
+export type WithChartCodeOptions = {
+    components: ChartComponents[];
+    extraRenderers?: ExtraRenderers;
+    debug?: boolean;
+    loadingTimeout?: number;
+};
+/**
+ * 图表渲染数据接口，后续拓展，这里只是写个示例
+ */
+export interface ChartJson {
+    type: string;
+    data: any[];
+}
+/**
+ * 图表组件字典
+ */
+export interface ChartComponents {
+    [key: string]: FC<BaseChartProps<any>>;
+}
+/**
+ * 代码块渲染器接口
+ */
+export type CodeBlockComponent = Components['code'];
+/** 额外的渲染器选项 */
+export interface ExtraRenderers {
+    [key: string]: FC<React.ClassAttributes<HTMLElement> & React.HTMLAttributes<HTMLElement> & ExtraProps>;
+}

package/dist/ChartCodeRender/type.js

@@ -0,0 +1 @@
+export {};

package/dist/Column/index.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import { StackableChartProps } from '../types';
+export type ColumnProps = StackableChartProps;
+declare const Column: (props: ColumnProps) => React.JSX.Element;
+export default Column;

package/dist/Column/index.js

@@ -0,0 +1,40 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import { Column as ADCColumn } from '@ant-design/plots';
+import React from 'react';
+var Column = function Column(props) {
+  var _props$data = props.data,
+    data = _props$data === void 0 ? [] : _props$data,
+    _props$xField = props.xField,
+    xField = _props$xField === void 0 ? 'x' : _props$xField,
+    _props$yField = props.yField,
+    yField = _props$yField === void 0 ? 'y' : _props$yField,
+    stackField = props.stackField,
+    style = props.style,
+    className = props.className;
+  var stackConfig = stackField ? {
+    colorField: stackField,
+    stack: true
+  } : {};
+  var config = _objectSpread({
+    data: data,
+    xField: xField || 'x',
+    yField: yField || 'y',
+    style: {
+      // 圆角样式
+      radiusTopLeft: 10,
+      radiusTopRight: 10
+    },
+    tooltip: function tooltip(d) {
+      return {
+        name: d[xField],
+        value: d[yField]
+      };
+    }
+  }, stackConfig);
+  return /*#__PURE__*/React.createElement(ADCColumn, _extends({
+    className: className,
+    containerStyle: _objectSpread({}, style)
+  }, config));
+};
+export default Column;

package/dist/HeatMap/index.d.ts

@@ -0,0 +1,12 @@
+import { type FC } from 'react';
+import { BaseChartProps } from '../types';
+type GeoData = {
+    lng: number;
+    lat: number;
+    size: number;
+};
+export interface HeatMapProps extends BaseChartProps<GeoData> {
+    className?: string;
+}
+declare const HeatMap: FC<HeatMapProps>;
+export default HeatMap;

package/dist/HeatMap/index.js

@@ -0,0 +1,60 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import { HeatmapLayer, LarkMap } from '@antv/larkmap';
+import React, { useState } from 'react';
+window._AMapSecurityConfig = {
+  securityJsCode: '8803c38931b6fddc9bbfeee69df8824d'
+};
+var CONFIG = {
+  mapType: 'Gaode',
+  mapOptions: {
+    style: 'normal',
+    center: [120.210792, 30.246026],
+    zoom: 12,
+    maxZoom: 18,
+    token: 'f0230f884bbd54e2913c890cdf45aa7e'
+  }
+};
+var heapLayerOptions = {
+  autoFit: true,
+  shape: 'heatmap',
+  size: {
+    field: 'size',
+    value: [0, 1]
+  },
+  style: {
+    intensity: 3,
+    radius: 20,
+    opacity: 1,
+    rampColors: {
+      colors: ['#FF4818', '#F7B74A', '#FFF598', '#F27DEB', '#8C1EB2', '#421EB2'],
+      positions: [0, 0.2, 0.4, 0.6, 0.8, 1.0]
+    }
+  }
+};
+var HeatMap = function HeatMap(props) {
+  var className = props.className,
+    style = props.style,
+    _props$data = props.data,
+    data = _props$data === void 0 ? [] : _props$data;
+  var _useState = useState({
+      data: data,
+      parser: {
+        type: 'json',
+        x: 'lng',
+        y: 'lat'
+      }
+    }),
+    _useState2 = _slicedToArray(_useState, 1),
+    heapSource = _useState2[0];
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(LarkMap, _extends({
+    className: className,
+    style: _objectSpread({
+      height: '300px'
+    }, style)
+  }, CONFIG), /*#__PURE__*/React.createElement(HeatmapLayer, _extends({}, heapLayerOptions, {
+    source: heapSource
+  }))));
+};
+export default HeatMap;

package/dist/Line/index.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import { StackableChartProps } from '../types';
+export type LineProps = StackableChartProps;
+declare const Line: (props: LineProps) => React.JSX.Element;
+export default Line;

package/dist/Line/index.js

@@ -0,0 +1,37 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import { Line as ADCLine } from '@ant-design/plots';
+import React from 'react';
+var Line = function Line(props) {
+  var _props$data = props.data,
+    data = _props$data === void 0 ? [] : _props$data,
+    _props$xField = props.xField,
+    xField = _props$xField === void 0 ? 'x' : _props$xField,
+    _props$yField = props.yField,
+    yField = _props$yField === void 0 ? 'y' : _props$yField,
+    stackField = props.stackField,
+    className = props.className,
+    style = props.style;
+
+  // 如果有 stackField，则使用 seriesField 进行分组显示，否则不分组
+  var stackConfig = stackField ? {
+    colorField: stackField
+  } : {};
+  var config = _objectSpread({
+    data: data,
+    xField: xField,
+    yField: yField,
+    tooltip: function tooltip(d) {
+      return {
+        name: d[xField],
+        value: d[yField]
+      };
+    },
+    smooth: true
+  }, stackConfig);
+  return /*#__PURE__*/React.createElement(ADCLine, _extends({
+    className: className,
+    containerStyle: _objectSpread({}, style)
+  }, config));
+};
+export default Line;

package/dist/MarkdownVis/index.d.ts

@@ -0,0 +1,22 @@
+import React from 'react';
+import { Options } from 'react-markdown';
+export type MarkdownVisProps = {
+    /**
+     * 需要被渲染的 markdown 字符串
+     */
+    children: string;
+    /**
+     * 注册的组件
+     */
+    components?: Options['components'];
+    /**
+     * 注册的 rehype 插件
+     */
+    rehypePlugins: Options['rehypePlugins'];
+    /**
+     * CSS Properties
+     */
+    style?: React.CSSProperties;
+};
+declare const MarkdownVis: React.FC<MarkdownVisProps>;
+export default MarkdownVis;

package/dist/MarkdownVis/index.js

@@ -0,0 +1,19 @@
+import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import React from 'react';
+import Markdown from 'react-markdown';
+import rehypeRaw from 'rehype-raw';
+import { withDefaultChartCode } from "../ChartCodeRender";
+var MarkdownVis = function MarkdownVis(_ref) {
+  var children = _ref.children,
+    components = _ref.components,
+    rehypePlugins = _ref.rehypePlugins;
+  var CodeBlock = withDefaultChartCode();
+  return /*#__PURE__*/React.createElement(Markdown, {
+    components: _objectSpread({
+      code: CodeBlock
+    }, components),
+    rehypePlugins: [rehypeRaw].concat(_toConsumableArray(rehypePlugins || []))
+  }, children);
+};
+export default MarkdownVis;

package/dist/Message/index.d.ts

@@ -0,0 +1,18 @@
+import React from 'react';
+import { Options } from 'react-markdown';
+export type MessageProps = {
+    /**
+     * 需要被渲染的 markdown 字符串
+     */
+    children: string;
+    /**
+     * 注册的组件
+     */
+    components?: Options['components'];
+    /**
+     * 注册的 rehype 插件
+     */
+    rehypePlugins?: Options['rehypePlugins'];
+};
+declare const Message: React.FC<MessageProps>;
+export default Message;

package/dist/Message/index.js

@@ -0,0 +1,14 @@
+import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
+import React from 'react';
+import Markdown from 'react-markdown';
+import rehypeRaw from 'rehype-raw';
+var Message = function Message(_ref) {
+  var children = _ref.children,
+    components = _ref.components,
+    rehypePlugins = _ref.rehypePlugins;
+  return /*#__PURE__*/React.createElement(Markdown, {
+    components: components,
+    rehypePlugins: [rehypeRaw].concat(_toConsumableArray(rehypePlugins || []))
+  }, children);
+};
+export default Message;

package/dist/PathMap/index.d.ts

@@ -0,0 +1,12 @@
+import { type FC } from 'react';
+import { BaseChartProps } from '../types';
+type GeoData = {
+    originName?: string;
+    destinationName?: string;
+    coordinates: [number, number][];
+};
+export interface PathMapProps extends BaseChartProps<GeoData> {
+    className?: string;
+}
+declare const PathMap: FC<PathMapProps>;
+export default PathMap;

package/dist/PathMap/index.js

@@ -0,0 +1,140 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import { LarkMap, LineLayer, PointLayer, TextLayer } from '@antv/larkmap';
+import React, { useState } from 'react';
+window._AMapSecurityConfig = {
+  securityJsCode: '8803c38931b6fddc9bbfeee69df8824d'
+};
+var CONFIG = {
+  mapType: 'Gaode',
+  mapOptions: {
+    style: 'normal',
+    center: [120.210792, 30.246026],
+    zoom: 12,
+    maxZoom: 18,
+    token: 'f0230f884bbd54e2913c890cdf45aa7e'
+  }
+};
+var lineLayerOptions = {
+  autoFit: false,
+  shape: 'line',
+  size: 3,
+  color: '#6808fed1',
+  style: {
+    opacity: 1,
+    lineType: 'solid',
+    stroke: '#6808FE',
+    strokeWidth: 1
+  }
+};
+var makerLayerOptions = {
+  autoFit: false,
+  shape: 'circle',
+  color: '#fff',
+  size: 4,
+  style: {
+    stroke: '#6808FE',
+    strokeWidth: 3
+  }
+};
+var labelLayerOptions = {
+  autoFit: false,
+  field: 'address',
+  style: {
+    fill: '#fff',
+    opacity: 1,
+    fontSize: 16,
+    fontWeight: 'bold',
+    stroke: '#6808FE',
+    strokeWidth: 8,
+    textAllowOverlap: false,
+    padding: [5, 5],
+    textOffset: [0, 30]
+  }
+};
+function bbox(data) {
+  var bounds = [Infinity, Infinity, -Infinity, -Infinity];
+  data.forEach(function (_ref) {
+    var coordinates = _ref.coordinates;
+    coordinates.forEach(function (_ref2) {
+      var _ref3 = _slicedToArray(_ref2, 2),
+        lng = _ref3[0],
+        lat = _ref3[1];
+      if (bounds[0] > lng) {
+        bounds[0] = lng;
+      }
+      if (bounds[1] > lat) {
+        bounds[1] = lat;
+      }
+      if (bounds[2] < lng) {
+        bounds[2] = lng;
+      }
+      if (bounds[3] < lat) {
+        bounds[3] = lat;
+      }
+    });
+  });
+  return bounds;
+}
+var PathMap = function PathMap(props) {
+  var className = props.className,
+    style = props.style,
+    _props$data = props.data,
+    data = _props$data === void 0 ? [] : _props$data;
+  var _useState = useState({
+      data: data,
+      parser: {
+        type: 'json',
+        coordinates: 'coordinates'
+      }
+    }),
+    _useState2 = _slicedToArray(_useState, 1),
+    lineSource = _useState2[0];
+  var _useState3 = useState(function () {
+      return {
+        data: data.map(function (item) {
+          return [{
+            lngLat: item.coordinates[0],
+            address: item === null || item === void 0 ? void 0 : item.originName
+          }, {
+            lngLat: item.coordinates[item.coordinates.length - 1],
+            address: item === null || item === void 0 ? void 0 : item.destinationName
+          }];
+        }).flat().filter(function (item) {
+          return item.address;
+        }),
+        parser: {
+          type: 'json',
+          coordinates: 'lngLat'
+        }
+      };
+    }),
+    _useState4 = _slicedToArray(_useState3, 1),
+    dotSource = _useState4[0];
+  var onSceneLoaded = function onSceneLoaded(scene) {
+    if (!data.length) return;
+    var bounds = bbox(data);
+    if (scene.getType() === 'amap') {
+      var _scene$map;
+      (_scene$map = scene.map) === null || _scene$map === void 0 || _scene$map.setBounds(bounds, true, [60, 60, 60, 60]);
+    } else {
+      scene.fitBounds([[bounds[0], bounds[1]], [bounds[2], bounds[3]]]);
+    }
+  };
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(LarkMap, _extends({
+    className: className,
+    style: _objectSpread({
+      height: 300
+    }, style)
+  }, CONFIG, {
+    onSceneLoaded: onSceneLoaded
+  }), /*#__PURE__*/React.createElement(LineLayer, _extends({}, lineLayerOptions, {
+    source: lineSource
+  })), /*#__PURE__*/React.createElement(PointLayer, _extends({}, makerLayerOptions, {
+    source: dotSource
+  })), /*#__PURE__*/React.createElement(TextLayer, _extends({}, labelLayerOptions, {
+    source: dotSource
+  }))));
+};
+export default PathMap;

package/dist/Pie/index.d.ts

@@ -0,0 +1,19 @@
+import React from 'react';
+import { BaseChartProps } from '../types';
+/**
+ * PieDataItem is the type for each data item in the pie chart.
+ * It includes the name of the sector and its corresponding value.
+ * @param name The name of the sector.
+ * @param value The value of the sector.
+ */
+export type PieDataItem = {
+    name: string;
+    value: number;
+};
+/**
+ * the props for the Pie
+ * @param data pie data
+ */
+export type PieProps = BaseChartProps<PieDataItem>;
+declare const Pie: (props: PieProps) => React.JSX.Element;
+export default Pie;

package/dist/Pie/index.js

@@ -0,0 +1,60 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import { Pie as ADCPie } from '@ant-design/plots';
+import React from 'react';
+
+/**
+ * PieDataItem is the type for each data item in the pie chart.
+ * It includes the name of the sector and its corresponding value.
+ * @param name The name of the sector.
+ * @param value The value of the sector.
+ */
+
+/**
+ * the props for the Pie
+ * @param data pie data
+ */
+
+var Pie = function Pie(props) {
+  var data = props.data,
+    className = props.className,
+    style = props.style;
+  var config = {
+    data: data,
+    angleField: 'value',
+    colorField: 'name',
+    state: {
+      selected: {
+        offset: 8
+      }
+    },
+    tooltip: function tooltip(d) {
+      return {
+        name: d.name,
+        value: d.value
+      };
+    },
+    label: {
+      text: 'value',
+      style: {
+        fontWeight: 'bold'
+      }
+    },
+    legend: {
+      color: {
+        title: false,
+        position: 'top'
+      }
+    },
+    interaction: {
+      elementSelect: {
+        single: true
+      }
+    }
+  };
+  return /*#__PURE__*/React.createElement(ADCPie, _extends({
+    className: className,
+    containerStyle: _objectSpread({}, style)
+  }, config));
+};
+export default Pie;

package/dist/PinMap/index.d.ts

@@ -0,0 +1,12 @@
+import { type FC } from 'react';
+import { BaseChartProps } from '../types';
+type GeoData = {
+    address: string;
+    lng: number;
+    lat: number;
+};
+export interface PinMapProps extends BaseChartProps<GeoData> {
+    className?: string;
+}
+declare const PinMap: FC<PinMapProps>;
+export default PinMap;

package/dist/PinMap/index.js

@@ -0,0 +1,114 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import { LarkMap, PointLayer, TextLayer } from '@antv/larkmap';
+import React, { useState } from 'react';
+window._AMapSecurityConfig = {
+  securityJsCode: '8803c38931b6fddc9bbfeee69df8824d'
+};
+var CONFIG = {
+  mapType: 'Gaode',
+  mapOptions: {
+    style: 'normal',
+    center: [120.210792, 30.246026],
+    zoom: 12,
+    maxZoom: 18,
+    token: 'f0230f884bbd54e2913c890cdf45aa7e'
+  }
+};
+
+// const SVG_BLOB = new Blob(
+//   [
+//     `<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" height="48px" width="48px" viewBox="0 0 1024 1024"><path d="M512 490.666667C453.12 490.666667 405.333333 442.88 405.333333 384 405.333333 325.12 453.12 277.333333 512 277.333333 570.88 277.333333 618.666667 325.12 618.666667 384 618.666667 442.88 570.88 490.666667 512 490.666667M512 85.333333C346.88 85.333333 213.333333 218.88 213.333333 384 213.333333 608 512 938.666667 512 938.666667 512 938.666667 810.666667 608 810.666667 384 810.666667 218.88 677.12 85.333333 512 85.333333Z" fill="#6808FE"></path></svg>`,
+//   ],
+//   { type: 'image/svg+xml;charset=utf-8' },
+// );
+// const SVG_URL = URL.createObjectURL(SVG_BLOB);
+var SVG_URL = 'https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*yVhwTrhcKZAAAAAAAAAAAAAADmJ7AQ/original';
+var makerLayerOptions = {
+  autoFit: false,
+  shape: 'marker',
+  size: 22,
+  style: {}
+};
+var labelLayerOptions = {
+  autoFit: false,
+  field: 'address',
+  style: {
+    fill: '#fff',
+    opacity: 1,
+    fontSize: 16,
+    fontWeight: 'bold',
+    stroke: '#6808FE',
+    strokeWidth: 8,
+    textAllowOverlap: false,
+    padding: [2, 2],
+    textOffset: [0, 50]
+  }
+};
+function bbox(data) {
+  var bounds = [Infinity, Infinity, -Infinity, -Infinity];
+  data.forEach(function (_ref) {
+    var lng = _ref.lng,
+      lat = _ref.lat;
+    if (bounds[0] > lng) {
+      bounds[0] = lng;
+    }
+    if (bounds[1] > lat) {
+      bounds[1] = lat;
+    }
+    if (bounds[2] < lng) {
+      bounds[2] = lng;
+    }
+    if (bounds[3] < lat) {
+      bounds[3] = lat;
+    }
+  });
+  return bounds;
+}
+var PinMap = function PinMap(props) {
+  var className = props.className,
+    style = props.style,
+    _props$data = props.data,
+    data = _props$data === void 0 ? [] : _props$data;
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    loadedImages = _useState2[0],
+    setLoadedImages = _useState2[1];
+  var _useState3 = useState({
+      data: data,
+      parser: {
+        type: 'json',
+        x: 'lng',
+        y: 'lat'
+      }
+    }),
+    _useState4 = _slicedToArray(_useState3, 1),
+    source = _useState4[0];
+  var onSceneLoaded = function onSceneLoaded(scene) {
+    scene.addImage('marker', SVG_URL).then(function () {
+      setLoadedImages(true);
+    });
+    if (!data.length) return;
+    var bounds = bbox(data);
+    if (scene.getType() === 'amap') {
+      var _scene$map;
+      (_scene$map = scene.map) === null || _scene$map === void 0 || _scene$map.setBounds(bounds, true, [50, 50, 50, 50]);
+    } else {
+      scene.fitBounds([[bounds[0], bounds[1]], [bounds[2], bounds[3]]]);
+    }
+  };
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(LarkMap, _extends({
+    className: className,
+    style: _objectSpread({
+      height: 300
+    }, style)
+  }, CONFIG, {
+    onSceneLoaded: onSceneLoaded
+  }), loadedImages && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(PointLayer, _extends({}, makerLayerOptions, {
+    source: source
+  })), /*#__PURE__*/React.createElement(TextLayer, _extends({}, labelLayerOptions, {
+    source: source
+  })))));
+};
+export default PinMap;

package/dist/PinMap/maker.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" height="48px" width="48px" viewBox="0 0 1024 1024"><path d="M512 490.666667C453.12 490.666667 405.333333 442.88 405.333333 384 405.333333 325.12 453.12 277.333333 512 277.333333 570.88 277.333333 618.666667 325.12 618.666667 384 618.666667 442.88 570.88 490.666667 512 490.666667M512 85.333333C346.88 85.333333 213.333333 218.88 213.333333 384 213.333333 608 512 938.666667 512 938.666667 512 938.666667 810.666667 608 810.666667 384 810.666667 218.88 677.12 85.333333 512 85.333333Z" fill="#6808FE"></path></svg>

package/dist/WordCloud/index.d.ts

@@ -0,0 +1,11 @@
+import { type FC } from 'react';
+import { BaseChartProps } from '../types';
+type PlotData = {
+    text: string;
+    value: number;
+};
+export interface WordCloudProps extends BaseChartProps<PlotData> {
+    className?: string;
+}
+declare const WordCloud: FC<WordCloudProps>;
+export default WordCloud;

package/dist/WordCloud/index.js

@@ -0,0 +1,27 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import { WordCloud as WordCloudPlot } from '@ant-design/plots';
+import React from 'react';
+var config = {
+  autoFit: true,
+  layout: {
+    fontSize: [20, 100]
+  },
+  encode: {
+    color: 'text'
+  },
+  legend: false
+};
+var WordCloud = function WordCloud(props) {
+  var className = props.className,
+    style = props.style,
+    _props$data = props.data,
+    data = _props$data === void 0 ? [] : _props$data;
+  return /*#__PURE__*/React.createElement(WordCloudPlot, _extends({
+    className: className,
+    containerStyle: _objectSpread({}, style)
+  }, config, {
+    data: data
+  }));
+};
+export default WordCloud;

package/dist/constants/index.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const DEFAULT_CHART_COMPONENTS: Record<string, React.FC<any>>;

package/dist/constants/index.js

@@ -0,0 +1,11 @@
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import Area from "../Area";
+import Line from "../Line";
+import HeatMap from "../HeatMap";
+import PathMap from "../PathMap";
+import Pie from "../Pie";
+import PinMap from "../PinMap";
+import WordCloud from "../WordCloud";
+import Column from "../Column";
+import { ChartType } from "../types";
+export var DEFAULT_CHART_COMPONENTS = _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, ChartType.Pie, Pie), ChartType.Area, Area), ChartType.Column, Column), ChartType.Line, Line), ChartType.WordCloud, WordCloud), ChartType.PinMap, PinMap), ChartType.PathMap, PathMap), ChartType.HeatMap, HeatMap);

package/dist/index.d.ts

@@ -0,0 +1,12 @@
+export { default as HeatMap } from './HeatMap';
+export { default as MarkdownVis } from './MarkdownVis';
+export { default as Message } from './Message';
+export { default as PathMap } from './PathMap';
+export { default as Pie } from './Pie';
+export { default as PinMap } from './PinMap';
+export { default as WordCloud } from './WordCloud';
+export { withChartCode, withDefaultChartCode } from './ChartCodeRender';
+export * from './types';
+export { default as Column, type ColumnProps } from './Column';
+export { default as Line, type LineProps } from './Line';
+export { default as Area, type AreaProps } from './Area';

package/dist/index.js

@@ -0,0 +1,12 @@
+export { default as HeatMap } from "./HeatMap";
+export { default as MarkdownVis } from "./MarkdownVis";
+export { default as Message } from "./Message";
+export { default as PathMap } from "./PathMap";
+export { default as Pie } from "./Pie";
+export { default as PinMap } from "./PinMap";
+export { default as WordCloud } from "./WordCloud";
+export { withChartCode, withDefaultChartCode } from "./ChartCodeRender";
+export * from "./types";
+export { default as Column } from "./Column";
+export { default as Line } from "./Line";
+export { default as Area } from "./Area";

package/dist/types/index.d.ts

@@ -0,0 +1,26 @@
+import { type CSSProperties } from 'react';
+export declare enum ChartType {
+    Pie = "pie",
+    Column = "column",
+    Line = "line",
+    Area = "area",
+    WordCloud = "word-cloud",
+    PinMap = "pin-map",
+    PathMap = "path-map",
+    HeatMap = "heat-map"
+}
+export interface BaseChartProps<T> {
+    data: T[];
+    style?: CSSProperties;
+    className?: string;
+}
+export interface XYAxis {
+    x: string | number;
+    y: number;
+    [key: string]: string | number;
+}
+export interface StackableChartProps extends BaseChartProps<XYAxis> {
+    xField?: string;
+    yField?: string;
+    stackField?: string;
+}

package/dist/types/index.js

@@ -0,0 +1,11 @@
+export var ChartType = /*#__PURE__*/function (ChartType) {
+  ChartType["Pie"] = "pie";
+  ChartType["Column"] = "column";
+  ChartType["Line"] = "line";
+  ChartType["Area"] = "area";
+  ChartType["WordCloud"] = "word-cloud";
+  ChartType["PinMap"] = "pin-map";
+  ChartType["PathMap"] = "path-map";
+  ChartType["HeatMap"] = "heat-map";
+  return ChartType;
+}({});

package/package.json

@@ -0,0 +1,93 @@
+{
+  "name": "@antv/gpt-vis",
+  "version": "0.0.1",
+  "description": "A chart library for LLM Agent",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/antvis/gpt-vis"
+  },
+  "author": "antvis",
+  "sideEffects": [
+    "**/*.less"
+  ],
+  "module": "dist/index.js",
+  "typings": "dist/index.d.ts",
+  "files": [
+    "dist",
+    "README.md"
+  ],
+  "scripts": {
+    "build": "bigfish-lib build",
+    "build:watch": "bigfish-lib build -w",
+    "ci": "tnpm run lint && jest --coverage",
+    "cov": "jest --coverage",
+    "create": "bigfish-lib create",
+    "deploy": "bigfish-lib deploy",
+    "dev": "bigfish-lib doc dev",
+    "doctor": "bigfish-lib doctor",
+    "lint": "bigfish-lib lint",
+    "pull": "bigfish-lib pull",
+    "start": "tnpm run dev",
+    "test": "jest"
+  },
+  "commitlint": {
+    "extends": [
+      "@commitlint/config-conventional"
+    ]
+  },
+  "lint-staged": {
+    "*.{md,json}": [
+      "prettier --cache --write --no-error-on-unmatched-pattern"
+    ],
+    "*.{js,jsx}": [
+      "bigfish-lib lint --fix --eslint-only",
+      "prettier --cache --write"
+    ],
+    "*.{css,less}": [
+      "bigfish-lib lint --fix --stylelint-only",
+      "prettier --cache --write"
+    ],
+    "*.{ts,tsx}": [
+      "bigfish-lib lint --fix --eslint-only",
+      "prettier --cache --parser=typescript --write"
+    ]
+  },
+  "dependencies": {
+    "@ant-design/icons": "^5.4.0",
+    "@ant-design/plots": "^2.2.5",
+    "@antv/l7": "^2.22.0",
+    "@antv/larkmap": "^1.4.17",
+    "@babel/runtime": "^7.18.0",
+    "lodash-es": "^4.17.21",
+    "react-markdown": "^9.0.1",
+    "rehype-raw": "^7.0.0",
+    "styled-components": "^6.0.7"
+  },
+  "devDependencies": {
+    "@ali/ci": "^4.26.0",
+    "@alipay/bigfish-library": "^4.0.0",
+    "@alipay/chat-design": "^1.3.9",
+    "@commitlint/cli": "^17.3.0",
+    "@commitlint/config-conventional": "^17.3.0",
+    "@testing-library/jest-dom": "^5.1.1",
+    "@testing-library/react": "^15.0.0",
+    "@types/jest": "^29.4.0",
+    "@types/lodash-es": "^4.17.12",
+    "@types/react": "^18.0.0",
+    "antd": "^5.0.0",
+    "husky": "^8.0.0",
+    "jest": "^29.4.3",
+    "jest-environment-jsdom": "^29.4.3",
+    "lint-staged": "^13.0.0",
+    "prettier": "^2.0.0",
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0"
+  },
+  "peerDependencies": {
+    "react": ">=16.9.0"
+  },
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org"
+  }
+}