@antv/gpt-vis 0.0.5 → 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2024 AntV
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,58 +1,48 @@
-# GPT-Vis
+<img src="https://gw.alipayobjects.com/zos/antfincdn/R8sN%24GNdh6/language.svg" width="18"> English | [简体中文](./README.zh-CN.md)
 
-为各种 LLM Agent 提供卡片服务的可视化资产和协议。
+<h1 align="center">GPT-Vis</h1>
 
-## ⏬ 安装
+<div align="center">
 
-```shell
-$ npm install @antv/gpt-vis@0.x --save
-```
+Components for GPTs, generative AI, and LLM projects. Not only UI Components.
 
-## 🌰 示例
+<p align="center">
+  <a href="https://gpt-vis.antv.com" target="_blank">Document</a> •
+  <a href="/knowledges" target="_blank">Knowledge</a> •
+  <a href="https://huggingface.co/antvis" target="_blank">Huggingface</a> •
+  <a href="https://tbox.alipay.com/share/202410APr1n200110168?platform=WebService" target="_blank">Agent Demo</a>
+</p>
 
-### 📦 组件中使用
+<div align="center">
+  <img src="https://github.com/eosphoros-ai/GPT-Vis/assets/17919400/c8804ffb-d3d6-45d3-846f-cf217681ab05" width=500">
+</div>
 
-```tsx | pure
-import React from 'react';
-import { Pie } from '@antv/gpt-vis';
+</div>
 
-const data = [
-  { name: '分类一', value: 27 },
-  { name: '分类二', value: 25 },
-  { name: '分类三', value: 18 },
-  { name: '分类四', value: 15 },
-  { name: '分类五', value: 10 },
-  { name: '其他', value: 5 },
-];
+## ✨ Features
 
-export default () => {
-  return <Pie data={data} />;
-};
-```
+- 🤖 **LLM Protocol**: A visual protocol for LLM Agent cards, designed for LLM conversational interaction and service serialized output, to facilitate rapid integration into AI applications.
+- 🍡 **LLM Component**: Developed components for LLM applications, with 20+ commonly used VIS components built-in, providing convenient expansion mechanism and architecture design for customized UI requirements.
+- 📈 **LLM access**: Chart knowledge base and chart recommendation model for seamless access to LLM, directly output visual cards for LLM, and provide knowledge base and recommended model solutions for Agent.
 
-### 📝 Markdown 中使用
+## 📦 Installation
 
-#### 方式一：使用 GPTVis 组件
+```bash
+$ npm i @antv/gpt-vis --save
+```
 
-```tsx | pure
-import React from 'react';
+## 🔨 Usage
+
+```jsx
 import { GPTVis } from '@antv/gpt-vis';
 
 const markdownContent = `
 # GPT-VIS \n\nComponents for GPTs, generative AI, and LLM projects. Not only UI Components.
 
+Here’s a visualization of Haidilao's food delivery revenue from 2013 to 2022. You can see a steady increase over the years, with notable *growth* particularly in recent years.
+
 \`\`\`vis-chart
-{
-  "type": "pie",
-  "data": [
-    { "name": "分类一", "value": 27 },
-    { "name": "分类二", "value": 25 },
-    { "name": "分类三", "value": 18 },
-    { "name": "分类四", "value": 15 },
-    { "name": "分类五", "value": 10 },
-    { "name": "其他", "value": 5 }
-  ]
-}
+{ "type": "line","data": [{"time":2013,"value":59.3},{"time":2014,"value":64.4},{"time":2015,"value":68.9},{"time":2016,"value":74.4},{"time":2017,"value":82.7},{"time":2018,"value":91.9},{"time":2019,"value":99.1},{"time":2020,"value":101.6},{"time":2021,"value":114.4},{"time":2022,"value":121}] }
 \`\`\`
 `;
 
@@ -61,36 +51,43 @@ export default () => {
 };
 ```
 
-#### 方式二：扩展 react-markdown 使用
+## 🛠 Custom renderer
 
-```tsx | pure
-import React from 'react';
-import Markdown from 'react-markdown';
-import { withDefaultChartCode } from '@antv/gpt-vis';
+```jsx
+import { GPTVis, withDefaultChartCode, VisText } from '@antv/gpt-vis';
 
 const markdownContent = `
-# GPT-VIS \n\nComponents for GPTs, generative AI, and LLM projects. Not only UI Components.
+<vis-text type="time_desc">本月</vis-text>共产生<vis-text type="metric_name">决策数量</vis-text><vis-text type="metric_value">2,783</vis-text>个，环比<vis-text type="trend_desc">增长</vis-text><vis-text type="ratio_value_pos">15.2%</vis-text>。<vis-text type="dim_name">高优先级决策</vis-text>占比<vis-text type="proportion">56.2%</vis-text>，呈现稳定<vis-text type="trend_desc" origin="[1, 2, 6, 18, 24, 48]">上升</vis-text>趋势，预计<vis-text type="time_desc">下月</vis-text>将突破<vis-text type="metric_value">3,000</vis-text>大关。
 
-\`\`\`vis-chart
-{
-  "type": "pie",
-  "data": [
-    { "name": "分类一", "value": 27 },
-    { "name": "分类二", "value": 25 },
-    { "name": "分类三", "value": 18 },
-    { "name": "分类四", "value": 15 },
-    { "name": "分类五", "value": 10 },
-    { "name": "其他", "value": 5 }
-  ]
-}
+\`\`\`my-ui
+my data
 \`\`\`
 `;
 
-const CodeBlock = withDefaultChartCode();
+const customRenderers = { 'my-ui': ({ children }) => <div>{children}</div> };
+const components = {
+  'vis-text': VisText,
+  code: withDefaultChartCode({ languageRenderers: customRenderers }),
+};
 
 export default () => {
-  return (
-    <Markdown components={{ code: CodeBlock }}>{markdownContent}</Markdown>
-  );
+  return <GPTVis components={components}>{markdownContent}</GPTVis>;
 };
 ```
+
+## 💻 Development
+
+```bash
+# install dependencies
+$ pnpm install
+
+# develop library by docs demo
+$ pnpm dev
+
+# build library source code
+$ pnpm build
+```
+
+## License
+
+[MIT](./LICENSE)

package/README.zh-CN.md

@@ -0,0 +1,93 @@
+<img src="https://gw.alipayobjects.com/zos/antfincdn/R8sN%24GNdh6/language.svg" width="18"> [English](./README.md) | 简体中文
+
+<h1 align="center">GPT-Vis</h1>
+
+<div align="center">
+
+Components for GPTs, generative AI, and LLM projects. Not only UI Components.
+
+<p align="center">
+  <a href="https://gpt-vis.antv.com" target="_blank">文档</a> •
+  <a href="/knowledges" target="_blank">知识库</a> •
+  <a href="https://huggingface.co/antvis" target="_blank">Huggingface</a> •
+  <a href="https://tbox.alipay.com/share/202410APr1n200110168?platform=WebService" target="_blank">体验 Agent</a>
+</p>
+
+<div align="center">
+  <img src="https://github.com/eosphoros-ai/GPT-Vis/assets/17919400/c8804ffb-d3d6-45d3-846f-cf217681ab05" width=500">
+</div>
+
+</div>
+
+## 特性
+
+- 🤖 **LLM 协议**：面向 LLM Agent 卡片的可视化协议，针对 LLM 对话式交互，以及服务序列化输出而设计，方便快速集成到 AI 应用中。
+- 🍡 **LLM 组件**：面向 LLM 应用研发组件, 内置有 20+ 常用 VIS 组件，对于定制 UI 需求，提供方便的扩展机制和架构设计。
+- 📈 **LLM 接入**：面向 LLM 无缝接入的图表知识库和图表推荐模型，针对 LLM 直接输出可视化卡片，为 Agent 提供知识库以及推荐模型方案。
+
+## 📦 安装
+
+```bash
+$ npm i @antv/gpt-vis --save
+```
+
+## 🔨 使用
+
+```jsx
+import { GPTVis } from '@antv/gpt-vis';
+
+const markdownContent = `
+# GPT-VIS \n\nComponents for GPTs, generative AI, and LLM projects. Not only UI Components.
+
+Here’s a visualization of Haidilao's food delivery revenue from 2013 to 2022. You can see a steady increase over the years, with notable *growth* particularly in recent years.
+
+\`\`\`vis-chart
+{ "type": "line","data": [{"time":2013,"value":59.3},{"time":2014,"value":64.4},{"time":2015,"value":68.9},{"time":2016,"value":74.4},{"time":2017,"value":82.7},{"time":2018,"value":91.9},{"time":2019,"value":99.1},{"time":2020,"value":101.6},{"time":2021,"value":114.4},{"time":2022,"value":121}] }
+\`\`\`
+`;
+
+export default () => {
+  return <GPTVis>{markdownContent}</GPTVis>;
+};
+```
+
+## 🛠 定制渲染器
+
+```jsx
+import { GPTVis, withDefaultChartCode, VisText } from '@antv/gpt-vis';
+
+const markdownContent = `
+<vis-text type="time_desc">本月</vis-text>共产生<vis-text type="metric_name">决策数量</vis-text><vis-text type="metric_value">2,783</vis-text>个，环比<vis-text type="trend_desc">增长</vis-text><vis-text type="ratio_value_pos">15.2%</vis-text>。<vis-text type="dim_name">高优先级决策</vis-text>占比<vis-text type="proportion">56.2%</vis-text>，呈现稳定<vis-text type="trend_desc" origin="[1, 2, 6, 18, 24, 48]">上升</vis-text>趋势，预计<vis-text type="time_desc">下月</vis-text>将突破<vis-text type="metric_value">3,000</vis-text>大关。
+
+\`\`\`my-ui
+my data
+\`\`\`
+`;
+
+const customRenderers = { 'my-ui': ({ children }) => <div>{children}</div> };
+const components = {
+  'vis-text': VisText,
+  code: withDefaultChartCode({ languageRenderers: customRenderers }),
+};
+
+export default () => {
+  return <GPTVis components={components}>{markdownContent}</GPTVis>;
+};
+```
+
+## 💻 本地开发
+
+```bash
+# install dependencies
+$ pnpm install
+
+# develop library by docs demo
+$ pnpm dev
+
+# build library source code
+$ pnpm build
+```
+
+## License
+
+[MIT](./LICENSE)

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

@@ -1,5 +1,11 @@
+import type { AreaConfig } from '@ant-design/plots';
 import React from 'react';
-import { StackableChartProps } from '../types';
-export type AreaProps = StackableChartProps;
+import type { BasePlotProps } from '../types';
+type AreaDataItem = {
+    time: string | number;
+    value: number;
+    [key: string]: string | number;
+};
+export type AreaProps = BasePlotProps<AreaDataItem> & Partial<AreaConfig>;
 declare const Area: (props: AreaProps) => React.JSX.Element;
 export default Area;

package/dist/cjs/Area/index.js

@@ -33,29 +33,30 @@ __export(Area_exports, {
 });
 module.exports = __toCommonJS(Area_exports);
 var import_plots = require("@ant-design/plots");
+var import_lodash = require("lodash");
 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,
+var import_hooks = require("../ConfigProvider/hooks");
+var defaultConfig = (props) => {
+  const { data, xField = "time", yField = "value" } = props;
+  const hasGroupField = (0, import_lodash.get)(data, "[0].group") !== void 0;
+  const axisYTitle = (0, import_lodash.get)(props, "axis.y.title");
+  const defalutStyle = hasGroupField ? {} : { opacity: 0.6 };
+  return {
     xField,
     yField,
+    style: defalutStyle,
+    colorField: hasGroupField ? "group" : void 0,
     tooltip: (d) => {
+      const tooltipName = axisYTitle || d[xField];
       return {
-        name: d[xField],
+        name: tooltipName,
         value: d[yField]
       };
-    },
-    ...stackConfig
+    }
   };
-  return /* @__PURE__ */ import_react.default.createElement(import_plots.Area, { className, containerStyle: { ...style }, ...config });
+};
+var Area = (props) => {
+  const config = (0, import_hooks.usePlotConfig)("Area", defaultConfig, props);
+  return /* @__PURE__ */ import_react.default.createElement(import_plots.Area, { ...config });
 };
 var Area_default = Area;

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

@@ -0,0 +1,11 @@
+import type { BarConfig } from '@ant-design/plots';
+import React from 'react';
+import type { BasePlotProps } from '../types';
+type BarDataItem = {
+    category: string;
+    value: number;
+    [key: string]: string | number;
+};
+export type BarProps = BasePlotProps<BarDataItem> & Partial<BarConfig>;
+declare const Bar: (props: BarProps) => React.JSX.Element;
+export default Bar;

package/dist/cjs/Bar/index.js

@@ -0,0 +1,65 @@
+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/Bar/index.tsx
+var Bar_exports = {};
+__export(Bar_exports, {
+  default: () => Bar_default
+});
+module.exports = __toCommonJS(Bar_exports);
+var import_plots = require("@ant-design/plots");
+var import_lodash = require("lodash");
+var import_react = __toESM(require("react"));
+var import_hooks = require("../ConfigProvider/hooks");
+var defaultConfig = (props) => {
+  const { data, xField = "category", yField = "value" } = props;
+  const hasGroupField = (0, import_lodash.get)(data, "[0].group") !== void 0;
+  const axisYTitle = (0, import_lodash.get)(props, "axis.y.title");
+  return {
+    xField,
+    yField,
+    colorField: hasGroupField ? "group" : void 0,
+    tooltip: (d) => {
+      const tooltipName = axisYTitle || d[xField];
+      return {
+        name: tooltipName,
+        value: d[yField]
+      };
+    },
+    style: {
+      // 圆角样式
+      radiusTopLeft: 5,
+      radiusTopRight: 5
+    }
+  };
+};
+var Bar = (props) => {
+  const config = (0, import_hooks.usePlotConfig)("Bar", defaultConfig, props);
+  return /* @__PURE__ */ import_react.default.createElement(import_plots.Bar, { ...config });
+};
+var Bar_default = Bar;

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

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const Loading: () => React.JSX.Element;
+export default Loading;

package/dist/cjs/ChartCodeRender/Loading.js

@@ -0,0 +1,54 @@
+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/Loading.tsx
+var Loading_exports = {};
+__export(Loading_exports, {
+  default: () => Loading_default
+});
+module.exports = __toCommonJS(Loading_exports);
+var import_icons = require("@ant-design/icons");
+var import_react = __toESM(require("react"));
+var import_styled_components = __toESM(require("styled-components"));
+var StyledLoading = import_styled_components.default.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  height: 300px;
+  background-image: linear-gradient(135deg, #e3f3ff 0%, #f1eeff 100%);
+  color: rgba(0, 0, 0, 88%);
+
+  &-icon {
+    margin-bottom: 6px;
+  }
+`;
+var Loading = () => {
+  return /* @__PURE__ */ import_react.default.createElement(StyledLoading, { 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 Loading_default = Loading;

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

@@ -0,0 +1,11 @@
+import React from 'react';
+import type { ChartComponents } from './type';
+type RenderVisChartProps = {
+    content: string;
+    components: ChartComponents;
+    debug?: boolean;
+    loadingTimeout: number;
+    style?: React.CSSProperties;
+};
+export declare const RenderVisChart: React.FC<RenderVisChartProps>;
+export {};

package/dist/cjs/ChartCodeRender/VisChart.js

@@ -0,0 +1,84 @@
+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/VisChart.tsx
+var VisChart_exports = {};
+__export(VisChart_exports, {
+  RenderVisChart: () => RenderVisChart
+});
+module.exports = __toCommonJS(VisChart_exports);
+var import_react = __toESM(require("react"));
+var import_styled_components = __toESM(require("styled-components"));
+var import_Loading = __toESM(require("./Loading"));
+var StyledGPTVis = import_styled_components.default.div`
+  min-width: 300px;
+  height: 300px;
+  max-width: 100%;
+`;
+var GlobalStyles = import_styled_components.createGlobalStyle`
+  pre:has(.gpt-vis) {
+    overflow: hidden;
+  }
+`;
+var RenderVisChart = (0, import_react.memo)(
+  ({ style, content, components, debug, loadingTimeout }) => {
+    const timeoutRef = (0, import_react.useRef)();
+    const [loading, setLoading] = (0, import_react.useState)(true);
+    let chartJson;
+    try {
+      chartJson = JSON.parse(content);
+    } catch (e) {
+      if (timeoutRef.current) {
+        clearTimeout(timeoutRef.current);
+        if (debug) {
+          console.warn("GPT-Vis withChartCode parse content timeout");
+        }
+      }
+      timeoutRef.current = setTimeout(() => {
+        setLoading(false);
+      }, loadingTimeout);
+      if (loading) {
+        return /* @__PURE__ */ import_react.default.createElement(StyledGPTVis, { className: "gpt-vis", style }, /* @__PURE__ */ import_react.default.createElement(import_Loading.default, null));
+      }
+      return /* @__PURE__ */ import_react.default.createElement("p", null, "Chart generation timeout.");
+    }
+    const { type, ...chartProps } = 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("p", null, `Chart type "${type}" is not supported.`);
+    }
+    return /* @__PURE__ */ import_react.default.createElement(StyledGPTVis, { className: "gpt-vis", style }, /* @__PURE__ */ import_react.default.createElement(GlobalStyles, null), /* @__PURE__ */ import_react.default.createElement(ChartComponent, { ...chartProps }));
+  }
+);
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  RenderVisChart
+});

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

@@ -1,9 +1,8 @@
-import React from 'react';
-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;
+import type { CodeBlockComponent, WithChartCodeOptions } from './type';
+export declare const withChartCode: (options: WithChartCodeOptions) => CodeBlockComponent;
 /**
  * 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;
+export declare const withDefaultChartCode: (options?: Partial<WithChartCodeOptions>) => CodeBlockComponent;