Skip to content

Commit

Permalink
docs: add chart demo for bubble
Browse files Browse the repository at this point in the history
  • Loading branch information
lvisei committed Nov 29, 2024
1 parent 14d47a0 commit dff8075
Show file tree
Hide file tree
Showing 5 changed files with 49 additions and 0 deletions.
7 changes: 7 additions & 0 deletions components/bubble/demo/chart.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
## zh-CN

配合 `@antv/GPT-Vis` 实现大模型输出的图表渲染。

## en-US

Cooperate with `@antv/GPT-Vis` to achieve customized rendering chart of LLM output.
39 changes: 39 additions & 0 deletions components/bubble/demo/chart.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,39 @@
import { Bubble } from '@ant-design/x';
import type { BubbleProps } from '@ant-design/x';
import { GPTVis } from '@antv/gpt-vis';
/* eslint-disable react/no-danger */
import React from 'react';

const text = `
**GPT-Vis**, Components for GPTs, generative AI, and LLM projects. Not only UI Components. [more...](https://github.com/antvis/GPT-Vis) \n\n
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}],
"axisXTitle": "year",
"axisYTitle": "sale"
}
\`\`\`
`;

const RenderMarkdown: BubbleProps['messageRender'] = (content) => <GPTVis>{content}</GPTVis>;

const App = () => {
return (
<div>
<Bubble
typing={{ step: 30, interval: 300 }}
content={text}
messageRender={RenderMarkdown}
avatar={{ src: 'https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*2Q5LRJ3LFPUAAAAAAAAAAAAADmJ7AQ/fmt.webp', }}
variant="outlined"
// styles={{ content: { background: '#fcfbfb' } }}
/>
</div>
);
};

export default App;
1 change: 1 addition & 0 deletions components/bubble/index.en-US.md
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,7 @@ Often used when chatting.
<code src="./demo/list.tsx">Bubble List</code>
<code src="./demo/bubble-custom.tsx">Semantic Custom</code>
<code src="./demo/list-custom.tsx">Custom List Content</code>
<code src="./demo/chart.tsx">Custom chart render</code>

## API

Expand Down
1 change: 1 addition & 0 deletions components/bubble/index.zh-CN.md
Original file line number Diff line number Diff line change
Expand Up @@ -30,6 +30,7 @@ demo:
<code src="./demo/list.tsx">气泡列表</code>
<code src="./demo/bubble-custom.tsx">语义化自定义</code>
<code src="./demo/list-custom.tsx">自定义列表内容</code>
<code src="./demo/chart.tsx">自定义图表渲染</code>

## API

Expand Down
1 change: 1 addition & 0 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -97,6 +97,7 @@
},
"devDependencies": {
"@ant-design/tools": "^18.0.2",
"@antv/gpt-vis": "^0.x",
"@biomejs/biome": "^1.9.0",
"@codecov/webpack-plugin": "^1.4.0",
"@codesandbox/sandpack-react": "^2.19.8",
Expand Down

0 comments on commit dff8075

Please sign in to comment.