@antv/gpt-vis 0.0.1 → 0.0.3

package/README.md

@@ -32,11 +32,11 @@ export default () => {
 
 ### 📝 Markdown 中使用
 
-#### 方式一：使用 MarkdownVis 组件
+#### 方式一：使用 GPTVis 组件
 
 ```tsx | pure
 import React from 'react';
-import { MarkdownVis } from '@antv/gpt-vis';
+import { GPTVis } from '@antv/gpt-vis';
 
 const markdownContent = `
 # GPT-VIS \n\nComponents for GPTs, generative AI, and LLM projects. Not only UI Components.
@@ -57,7 +57,7 @@ const markdownContent = `
 `;
 
 export default () => {
-  return <MarkdownVis>{markdownContent}</MarkdownVis>;
+  return <GPTVis>{markdownContent}</GPTVis>;
 };
 ```
 

package/dist/cjs/Area/index.js

@@ -0,0 +1,61 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/Area/index.tsx
+var Area_exports = {};
+__export(Area_exports, {
+  default: () => Area_default
+});
+module.exports = __toCommonJS(Area_exports);
+var import_plots = require("@ant-design/plots");
+var import_react = __toESM(require("react"));
+var Area = (props) => {
+  const {
+    data = [],
+    xField = "x",
+    yField = "y",
+    stackField,
+    className,
+    style
+  } = props;
+  const stackConfig = stackField ? { colorField: stackField, isStack: true } : {};
+  const config = {
+    data,
+    xField,
+    yField,
+    tooltip: (d) => {
+      return {
+        name: d[xField],
+        value: d[yField]
+      };
+    },
+    ...stackConfig
+  };
+  return /* @__PURE__ */ import_react.default.createElement(import_plots.Area, { className, containerStyle: { ...style }, ...config });
+};
+var Area_default = Area;

package/dist/{ChartCodeRender → cjs/ChartCodeRender}/index.d.ts

@@ -1,12 +1,6 @@
 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;
+import './index.css';
+import { WithChartCodeOptions } from './type';
 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.

package/dist/cjs/ChartCodeRender/index.js

@@ -0,0 +1,121 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/ChartCodeRender/index.tsx
+var ChartCodeRender_exports = {};
+__export(ChartCodeRender_exports, {
+  withChartCode: () => withChartCode,
+  withDefaultChartCode: () => withDefaultChartCode
+});
+module.exports = __toCommonJS(ChartCodeRender_exports);
+var import_icons = require("@ant-design/icons");
+var import_lodash_es = require("lodash-es");
+var import_react = __toESM(require("react"));
+var import_constants = require("../constants");
+var import_index = require("./index.css");
+var Loading = () => {
+  return /* @__PURE__ */ import_react.default.createElement("div", { className: "gpt-vis-loading" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "gpt-vis-loading-icon" }, /* @__PURE__ */ import_react.default.createElement(
+    import_icons.LoadingOutlined,
+    {
+      style: { fontSize: "24px", color: "rgb(56, 177, 246)" }
+    }
+  )), /* @__PURE__ */ import_react.default.createElement("p", null, "数据生成中"));
+};
+var withCodeBlock = (options) => {
+  return function CodeBlock(props) {
+    var _a;
+    const { children, className = "", node, ...rest } = props;
+    const content = String(children).trim();
+    const isVisChart = className.includes("language-vis-chart");
+    const {
+      components,
+      extraRenderers,
+      languageRenderers,
+      defaultRenderer: DefaultRenderer,
+      debug,
+      loadingTimeout = 5e3
+    } = options;
+    const timeoutRef = (0, import_react.useRef)();
+    const [loading, setLoading] = (0, import_react.useState)(true);
+    if (isVisChart) {
+      let 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(() => {
+          setLoading(false);
+        }, loadingTimeout);
+        return loading ? /* @__PURE__ */ import_react.default.createElement(Loading, null) : /* @__PURE__ */ import_react.default.createElement("code", null, content.toString());
+      }
+      const { type } = chartJson;
+      const ChartComponent = components[type];
+      if (debug) {
+        console.log(
+          "GPT-Vis withChartCode get chartJson parse from vis-chart code block",
+          chartJson
+        );
+      }
+      if (!ChartComponent) {
+        return /* @__PURE__ */ import_react.default.createElement("code", null, `Chart type "${type}" is not supported.`);
+      }
+      return /* @__PURE__ */ import_react.default.createElement("div", { className: "gpt-vis" }, /* @__PURE__ */ import_react.default.createElement(ChartComponent, { ...chartJson }));
+    }
+    const languageName = ((_a = className.match(/language-(.*)/)) == null ? void 0 : _a[1]) || "";
+    const extraLanguageRenderers = extraRenderers || languageRenderers;
+    const ExtraRendererComponent = extraLanguageRenderers && extraLanguageRenderers[languageName];
+    if (ExtraRendererComponent) {
+      return /* @__PURE__ */ import_react.default.createElement(ExtraRendererComponent, { ...props });
+    }
+    return DefaultRenderer ? /* @__PURE__ */ import_react.default.createElement(DefaultRenderer, { ...props }) : /* @__PURE__ */ import_react.default.createElement("code", { ...rest, className }, children);
+  };
+};
+var withChartCode = (options) => {
+  var _a;
+  const components = ((_a = options.components) == null ? void 0 : _a.reduce((acc, obj) => ({ ...acc, ...obj }), {})) || [];
+  return withCodeBlock({
+    ...options,
+    components
+  });
+};
+var withDefaultChartCode = (options) => {
+  return withChartCode({
+    ...options,
+    components: [import_constants.DEFAULT_CHART_COMPONENTS, ...(0, import_lodash_es.get)(options, "components", [])]
+  });
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  withChartCode,
+  withDefaultChartCode
+});

package/dist/cjs/ChartCodeRender/type.d.ts

@@ -0,0 +1,55 @@
+import { FC } from 'react';
+import { Components, ExtraProps } from 'react-markdown';
+import { BaseChartProps } from '../types';
+export type WithChartCodeOptions = {
+    /**
+     * 要额外加载的图表组件
+     */
+    components: ChartComponents[];
+    /**
+     * @deprecated
+     * 请使用  languageRenderers
+     */
+    extraRenderers?: LanguageRenderers;
+    /**
+     * 自定义其它语言代码块渲染器
+     */
+    languageRenderers?: LanguageRenderers;
+    /**
+     * 默认的代码渲染器
+     */
+    defaultRenderer?: CodeRenderer;
+    /**
+     * 打开调试日志
+     */
+    debug?: boolean;
+    /**
+     * 设置loading动画的超时时间，默认为 5s
+     */
+    loadingTimeout?: number;
+};
+/**
+ * 图表渲染数据接口，后续拓展，这里只是写个示例
+ */
+export interface ChartJson {
+    type: string;
+    data: any[];
+}
+/**
+ * 图表组件字典
+ */
+export interface ChartComponents {
+    [key: string]: FC<BaseChartProps<any>>;
+}
+/**
+ * 代码块渲染器接口
+ */
+export type CodeBlockComponent = Components['code'];
+type CodeRenderer = FC<React.ClassAttributes<HTMLElement> & React.HTMLAttributes<HTMLElement> & ExtraProps>;
+/**
+ * 自定义其它语言代码块渲染器
+ */
+interface LanguageRenderers {
+    [key: string]: CodeRenderer;
+}
+export {};

package/dist/cjs/ChartCodeRender/type.js

@@ -0,0 +1,17 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/ChartCodeRender/type.ts
+var type_exports = {};
+module.exports = __toCommonJS(type_exports);

package/dist/cjs/Column/index.js

@@ -0,0 +1,73 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/Column/index.tsx
+var Column_exports = {};
+__export(Column_exports, {
+  default: () => Column_default
+});
+module.exports = __toCommonJS(Column_exports);
+var import_plots = require("@ant-design/plots");
+var import_react = __toESM(require("react"));
+var Column = (props) => {
+  const {
+    data = [],
+    xField = "x",
+    yField = "y",
+    stackField,
+    style,
+    className
+  } = props;
+  const stackConfig = stackField ? { colorField: stackField, stack: true } : {};
+  const config = {
+    data,
+    xField: xField || "x",
+    yField: yField || "y",
+    style: {
+      // 圆角样式
+      radiusTopLeft: 10,
+      radiusTopRight: 10
+    },
+    tooltip: (d) => {
+      return {
+        name: d[xField],
+        value: d[yField]
+      };
+    },
+    ...stackConfig
+  };
+  return /* @__PURE__ */ import_react.default.createElement(
+    import_plots.Column,
+    {
+      className,
+      containerStyle: { ...style },
+      ...config
+    }
+  );
+};
+var Column_default = Column;

package/dist/cjs/GPTVis/index.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import { Options } from 'react-markdown';
+export interface GPTVisProps extends Options {
+    /**
+     * 需要被渲染的 markdown 字符串
+     */
+    children: string;
+}
+declare const GPTVis: React.FC<GPTVisProps>;
+export default GPTVis;

package/dist/cjs/GPTVis/index.js

@@ -0,0 +1,56 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/GPTVis/index.tsx
+var GPTVis_exports = {};
+__export(GPTVis_exports, {
+  default: () => GPTVis_default
+});
+module.exports = __toCommonJS(GPTVis_exports);
+var import_react = __toESM(require("react"));
+var import_react_markdown = __toESM(require("react-markdown"));
+var import_rehype_raw = __toESM(require("rehype-raw"));
+var import_ChartCodeRender = require("../ChartCodeRender");
+var GPTVis = ({
+  children,
+  components,
+  rehypePlugins,
+  ...rest
+}) => {
+  const CodeBlock = (0, import_ChartCodeRender.withDefaultChartCode)();
+  return /* @__PURE__ */ import_react.default.createElement(
+    import_react_markdown.default,
+    {
+      components: { code: CodeBlock, ...components },
+      rehypePlugins: [import_rehype_raw.default, ...rehypePlugins || []],
+      ...rest
+    },
+    children
+  );
+};
+var GPTVis_default = GPTVis;

package/dist/cjs/HeatMap/index.js

@@ -0,0 +1,90 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/HeatMap/index.tsx
+var HeatMap_exports = {};
+__export(HeatMap_exports, {
+  default: () => HeatMap_default
+});
+module.exports = __toCommonJS(HeatMap_exports);
+var import_larkmap = require("@antv/larkmap");
+var import_react = __toESM(require("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]
+    }
+  }
+};
+var HeatMap = (props) => {
+  const { className, style, data = [] } = props;
+  const [heapSource] = (0, import_react.useState)({
+    data,
+    parser: { type: "json", x: "lng", y: "lat" }
+  });
+  return /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__PURE__ */ import_react.default.createElement(
+    import_larkmap.LarkMap,
+    {
+      className,
+      style: { height: "300px", ...style },
+      ...CONFIG
+    },
+    /* @__PURE__ */ import_react.default.createElement(import_larkmap.HeatmapLayer, { ...heapLayerOptions, source: heapSource })
+  ));
+};
+var HeatMap_default = HeatMap;

package/dist/cjs/Line/index.js

@@ -0,0 +1,62 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/Line/index.tsx
+var Line_exports = {};
+__export(Line_exports, {
+  default: () => Line_default
+});
+module.exports = __toCommonJS(Line_exports);
+var import_plots = require("@ant-design/plots");
+var import_react = __toESM(require("react"));
+var Line = (props) => {
+  const {
+    data = [],
+    xField = "x",
+    yField = "y",
+    stackField,
+    className,
+    style
+  } = props;
+  const stackConfig = stackField ? { colorField: stackField } : {};
+  const config = {
+    data,
+    xField,
+    yField,
+    tooltip: (d) => {
+      return {
+        name: d[xField],
+        value: d[yField]
+      };
+    },
+    smooth: true,
+    ...stackConfig
+  };
+  return /* @__PURE__ */ import_react.default.createElement(import_plots.Line, { className, containerStyle: { ...style }, ...config });
+};
+var Line_default = Line;