From 05abde248d87dafdb792416e020832ba53d2e396 Mon Sep 17 00:00:00 2001 From: lvisei Date: Tue, 19 Nov 2024 01:54:11 +0800 Subject: [PATCH 1/2] feat: lite render GPTVis --- README.md | 24 ++++++++++---- README.zh-CN.md | 24 ++++++++++---- docs/guide/quick-start.md | 40 ++++++++++++++++++++---- eslint.config.js | 1 + src/Area/demos/markdown.tsx | 4 +-- src/Area/demos/stack.tsx | 4 +-- src/Bar/demos/group.tsx | 4 +-- src/Bar/demos/markdown.tsx | 4 +-- src/Bar/demos/stack.tsx | 4 +-- src/ChartCodeRender/demos/common.tsx | 6 ++-- src/ChartCodeRender/demos/default.tsx | 8 ++--- src/ChartCodeRender/demos/extra.tsx | 28 ++++++++++------- src/ChartCodeRender/demos/stream.tsx | 4 +-- src/Column/demos/group.tsx | 4 +-- src/Column/demos/markdown.tsx | 4 +-- src/Column/demos/stack.tsx | 4 +-- src/DualAxes/demos/markdown.tsx | 4 +-- src/DualAxes/demos/multiple.tsx | 4 +-- src/FlowDiagram/demos/markdown.tsx | 4 +-- src/GPTVis/Lite.tsx | 32 +++++++++++++++++++ src/GPTVis/demos/code.tsx | 32 ++++++++----------- src/GPTVis/demos/default.tsx | 2 -- src/GPTVis/demos/tag.tsx | 4 +-- src/GPTVis/index.md | 4 +++ src/HeatMap/index.md | 4 +-- src/Histogram/demos/markdown.tsx | 4 +-- src/IndentedTree/demos/markdown.tsx | 4 +-- src/Line/demos/category.tsx | 4 +-- src/Line/demos/markdown.tsx | 4 +-- src/MindMap/demos/markdown.tsx | 4 +-- src/NetworkGraph/demos/markdown.tsx | 4 +-- src/OrganizationChart/demos/markdown.tsx | 4 +-- src/PathMap/demos/markdown.tsx | 4 +-- src/Pie/demos/markdown.tsx | 4 +-- src/PinMap/demos/markdown.tsx | 4 +-- src/Radar/demos/category.tsx | 4 +-- src/Radar/demos/markdown.tsx | 4 +-- src/Scatter/demos/markdown.tsx | 4 +-- src/Treemap/demos/markdown.tsx | 4 +-- src/WordCloud/index.md | 4 +-- src/index.ts | 1 + 41 files changed, 203 insertions(+), 115 deletions(-) create mode 100644 src/GPTVis/Lite.tsx diff --git a/README.md b/README.md index 29ca624..4a8d048 100644 --- a/README.md +++ b/README.md @@ -68,24 +68,36 @@ export default () => { ## 🛠 Custom renderer ```jsx -import { GPTVis, withDefaultChartCode, VisText } from '@antv/gpt-vis'; +import { GPTVisLite, withChartCode, ChartType, Pie } from '@antv/gpt-vis'; const markdownContent = ` -本月共产生决策数量2,783个，环比增长15.2%。高优先级决策占比56.2%，呈现稳定上升趋势，预计下月将突破3,000大关。 - \`\`\`my-ui my data \`\`\` + +\`\`\`vis-chart +{ + "type": "pie", + "data": [ + { "category": "category 1", "value": 27 }, + { "category": "category 2", "value": 25 }, + { "category": "category 3", "value": 18 }, + { "category": "other", "value": 5 } + ] +} +\`\`\` `; const customRenderers = { 'my-ui': ({ children }) =>
{children}
}; const components = { - 'vis-text': VisText, - code: withDefaultChartCode({ languageRenderers: customRenderers }), + code: withChartCode({ + languageRenderers: customRenderers, // register custom block renderer + components: { [ChartType.Pie]: Pie }, // register a pie chart + }), }; export default () => { - return {markdownContent}; + return {markdownContent}; }; ``` diff --git a/README.zh-CN.md b/README.zh-CN.md index 1ab5404..014ea59 100644 --- a/README.zh-CN.md +++ b/README.zh-CN.md @@ -68,24 +68,36 @@ export default () => { ## 🛠 定制渲染器 ```jsx -import { GPTVis, withDefaultChartCode, VisText } from '@antv/gpt-vis'; +import { GPTVisLite, withChartCode, ChartType, Pie } from '@antv/gpt-vis'; const markdownContent = ` -本月共产生决策数量2,783个，环比增长15.2%。高优先级决策占比56.2%，呈现稳定上升趋势，预计下月将突破3,000大关。 - \`\`\`my-ui my data \`\`\` + +\`\`\`vis-chart +{ + "type": "pie", + "data": [ + { "category": "分类一", "value": 27 }, + { "category": "分类二", "value": 25 }, + { "category": "分类三", "value": 18 }, + { "category": "其他", "value": 5 } + ] +} +\`\`\` `; const customRenderers = { 'my-ui': ({ children }) =>
{children}
}; const components = { - 'vis-text': VisText, - code: withDefaultChartCode({ languageRenderers: customRenderers }), + code: withChartCode({ + languageRenderers: customRenderers, // register custom block renderer + components: { [ChartType.Pie]: Pie }, // register a pie chart + }), }; export default () => { - return {markdownContent}; + return {markdownContent}; }; ``` diff --git a/docs/guide/quick-start.md b/docs/guide/quick-start.md index 97b2b26..f2be67f 100644 --- a/docs/guide/quick-start.md +++ b/docs/guide/quick-start.md @@ -23,7 +23,21 @@ const markdownContent = ` 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}] } +{ + "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 } + ] +} \`\`\` `; @@ -37,25 +51,39 @@ export default () => { 业务定制 UI 场景，提供方便的扩展机制，支持标签和代码块扩展。 ```tsx | pure -import { GPTVis, withDefaultChartCode, VisText } from '@antv/gpt-vis'; +import { GPTVisLite, withChartCode, ChartType, Pie } from '@antv/gpt-vis'; const markdownContent = ` \`\`\`my-ui my data \`\`\` -本月共产生决策数量2,783个，环比增长15.2%。高优先级决策占比56.2%，呈现稳定上升趋势，预计下月将突破3,000大关。 +\`\`\`vis-chart +{ + "type": "pie", + "data": [ + { "category": "分类一", "value": 27 }, + { "category": "分类二", "value": 25 }, + { "category": "分类三", "value": 18 }, + { "category": "其他", "value": 5 } + ] +} +\`\`\` `; const customRenderers = { 'my-ui': ({ children }) =>
{children}
, }; const components = { - 'vis-text': VisText, - code: withDefaultChartCode({ languageRenderers: customRenderers }), + code: withChartCode({ + // register custom block renderer + languageRenderers: customRenderers, + // register a pie chart + components: { [ChartType.Pie]: Pie }, + }), }; export default () => { - return {markdownContent}; + return {markdownContent}; }; ``` diff --git a/eslint.config.js b/eslint.config.js index b98192d..53bb8ca 100644 --- a/eslint.config.js +++ b/eslint.config.js @@ -77,6 +77,7 @@ export default tseslint.config( '@typescript-eslint/no-duplicate-enum-values': 0, '@typescript-eslint/no-use-before-define': 0, '@typescript-eslint/no-empty-object-type': 0, + '@typescript-eslint/no-unused-expressions': ['error', { allowShortCircuit: true }], }, }, diff --git a/src/Area/demos/markdown.tsx b/src/Area/demos/markdown.tsx index 66b109c..7c4e35f 100644 --- a/src/Area/demos/markdown.tsx +++ b/src/Area/demos/markdown.tsx @@ -1,6 +1,6 @@ import type { BubbleProps } from '@ant-design/x'; import { Bubble } from '@ant-design/x'; -import { Area, ChartType, GPTVis, withChartCode } from '@antv/gpt-vis'; +import { Area, ChartType, GPTVisLite, withChartCode } from '@antv/gpt-vis'; import React from 'react'; const markdownContent = ` @@ -29,7 +29,7 @@ const CodeComponent = withChartCode({ style: { width: 350 }, }); const RenderMarkdown: BubbleProps['messageRender'] = (content) => ( - {content} + {content} ); export default () => ( diff --git a/src/Area/demos/stack.tsx b/src/Area/demos/stack.tsx index c71ba1f..5022e8e 100644 --- a/src/Area/demos/stack.tsx +++ b/src/Area/demos/stack.tsx @@ -1,5 +1,5 @@ import { Bubble, type BubbleProps } from '@ant-design/x'; -import { Area, ChartType, GPTVis, withChartCode } from '@antv/gpt-vis'; +import { Area, ChartType, GPTVisLite, withChartCode } from '@antv/gpt-vis'; import React from 'react'; const markdownContent = ` @@ -91,7 +91,7 @@ const CodeComponent = withChartCode({ }); const RenderMarkdown: BubbleProps['messageRender'] = (content) => ( - {content} + {content} ); export default () => ( diff --git a/src/Bar/demos/group.tsx b/src/Bar/demos/group.tsx index 9dc2be7..6ec40cc 100644 --- a/src/Bar/demos/group.tsx +++ b/src/Bar/demos/group.tsx @@ -1,5 +1,5 @@ import { Bubble, type BubbleProps } from '@ant-design/x'; -import { Bar, ChartType, GPTVis, withChartCode } from '@antv/gpt-vis'; +import { Bar, ChartType, GPTVisLite, withChartCode } from '@antv/gpt-vis'; import React from 'react'; const markdownContent = ` @@ -46,7 +46,7 @@ const CodeComponent = withChartCode({ }); const RenderMarkdown: BubbleProps['messageRender'] = (content) => ( - {content} + {content} ); export default () => ( diff --git a/src/Bar/demos/markdown.tsx b/src/Bar/demos/markdown.tsx index e24da85..c22c7d3 100644 --- a/src/Bar/demos/markdown.tsx +++ b/src/Bar/demos/markdown.tsx @@ -1,5 +1,5 @@ import { Bubble, type BubbleProps } from '@ant-design/x'; -import { Bar, ChartType, GPTVis, withChartCode } from '@antv/gpt-vis'; +import { Bar, ChartType, GPTVisLite, withChartCode } from '@antv/gpt-vis'; import React from 'react'; const markdownContent = ` @@ -37,7 +37,7 @@ const CodeComponent = withChartCode({ }); const RenderMarkdown: BubbleProps['messageRender'] = (content) => ( - {content} + {content} ); export default () => ( diff --git a/src/Bar/demos/stack.tsx b/src/Bar/demos/stack.tsx index 9255d9a..5de2069 100644 --- a/src/Bar/demos/stack.tsx +++ b/src/Bar/demos/stack.tsx @@ -1,5 +1,5 @@ import { Bubble, type BubbleProps } from '@ant-design/x'; -import { Bar, ChartType, GPTVis, withChartCode } from '@antv/gpt-vis'; +import { Bar, ChartType, GPTVisLite, withChartCode } from '@antv/gpt-vis'; import React from 'react'; const markdownContent = ` @@ -45,7 +45,7 @@ const CodeComponent = withChartCode({ components: { [ChartType.Bar]: Bar }, }); const RenderMarkdown: BubbleProps['messageRender'] = (content) => ( - {content} + {content} ); export default () => ( diff --git a/src/ChartCodeRender/demos/common.tsx b/src/ChartCodeRender/demos/common.tsx index a68d42f..e879c4a 100644 --- a/src/ChartCodeRender/demos/common.tsx +++ b/src/ChartCodeRender/demos/common.tsx @@ -1,4 +1,4 @@ -import { ChartType, Column, GPTVis, withChartCode } from '@antv/gpt-vis'; +import { ChartType, Column, GPTVisLite, withChartCode } from '@antv/gpt-vis'; import React from 'react'; const markdownContent = ` @@ -24,12 +24,12 @@ const CodeComponent = withChartCode({ export default () => { return ( - {markdownContent} - + ); }; diff --git a/src/ChartCodeRender/demos/default.tsx b/src/ChartCodeRender/demos/default.tsx index b3d543d..55a04ed 100644 --- a/src/ChartCodeRender/demos/default.tsx +++ b/src/ChartCodeRender/demos/default.tsx @@ -1,4 +1,4 @@ -import { GPTVis, withDefaultChartCode } from '@antv/gpt-vis'; +import { GPTVisLite, withDefaultChartCode } from '@antv/gpt-vis'; import React from 'react'; const commonString = ` @@ -30,13 +30,13 @@ const CodeComponent = withDefaultChartCode({ export default () => (
- {commonString} - {commonString} + {markdownContent} - +
); diff --git a/src/ChartCodeRender/demos/extra.tsx b/src/ChartCodeRender/demos/extra.tsx index 38a1ca1..41bf031 100644 --- a/src/ChartCodeRender/demos/extra.tsx +++ b/src/ChartCodeRender/demos/extra.tsx @@ -1,5 +1,5 @@ import type { CodeBlockComponent } from '@antv/gpt-vis'; -import { GPTVis, withDefaultChartCode } from '@antv/gpt-vis'; +import { GPTVisLite, withDefaultChartCode } from '@antv/gpt-vis'; import React from 'react'; /** @@ -16,14 +16,20 @@ my data ... \`\`\`vis-chart { - "type": "pie", - "data": [ - { "category": "分类一", "value": 27 }, - { "category": "分类二", "value": 25 }, - { "category": "分类三", "value": 18 }, - { "category": "分类四", "value": 15 }, - { "category": "分类五", "value": 10 }, - { "category": "其他", "value": 5 } + "type": "pin-map", + "data": [ + { "label": "杨梅岭", "longitude": 120.118362, "latitude": 30.217175 }, + { "label": "理安寺", "longitude": 120.112958, "latitude": 30.207319 }, + { "label": "九溪烟树", "longitude": 120.11335, "latitude": 30.202395 }, + { "label": "飞来峰", "longitude": 120.100549, "latitude": 30.236875 }, + { "label": "灵隐寺", "longitude": 120.101406, "latitude": 30.240826 }, + { "label": "天竺三寺", "longitude": 120.105337, "latitude": 30.236818 }, + { "label": "杭州植物园", "longitude": 120.116979, "latitude": 30.252876 }, + { "label": "杭州花圃", "longitude": 120.127654, "latitude": 30.245663 }, + { "label": "苏堤", "longitude": 120.135764, "latitude": 30.251448 }, + { "label": "虎跑公园", "longitude": 120.130095, "latitude": 30.207505 }, + { "label": "玉皇飞云", "longitude": 120.145323, "latitude": 30.214993 }, + { "label": "长桥公园", "longitude": 120.155057, "latitude": 30.232985 } ] } \`\`\` @@ -38,12 +44,12 @@ const CodeComponent = withDefaultChartCode({ export default () => (
- {markdownContent} - +
); diff --git a/src/ChartCodeRender/demos/stream.tsx b/src/ChartCodeRender/demos/stream.tsx index c125197..46ee6eb 100644 --- a/src/ChartCodeRender/demos/stream.tsx +++ b/src/ChartCodeRender/demos/stream.tsx @@ -1,5 +1,5 @@ import { Bubble, type BubbleProps } from '@ant-design/x'; -import { ChartType, Column, GPTVis, withChartCode } from '@antv/gpt-vis'; +import { ChartType, Column, GPTVisLite, withChartCode } from '@antv/gpt-vis'; import React, { useEffect, useRef, useState } from 'react'; const markdownContent = ` @@ -32,7 +32,7 @@ const CodeComponent = withChartCode({ }); const RenderMarkdown: BubbleProps['messageRender'] = (content) => ( - {content} + {content} ); const useStreamText = () => { diff --git a/src/Column/demos/group.tsx b/src/Column/demos/group.tsx index 74a2cff..eaa4a0d 100644 --- a/src/Column/demos/group.tsx +++ b/src/Column/demos/group.tsx @@ -1,5 +1,5 @@ import { Bubble, type BubbleProps } from '@ant-design/x'; -import { ChartType, Column, GPTVis, withChartCode } from '@antv/gpt-vis'; +import { ChartType, Column, GPTVisLite, withChartCode } from '@antv/gpt-vis'; import React from 'react'; const markdownContent = ` @@ -40,7 +40,7 @@ const CodeComponent = withChartCode({ }); const RenderMarkdown: BubbleProps['messageRender'] = (content) => ( - {content} + {content} ); export default () => ( diff --git a/src/Column/demos/markdown.tsx b/src/Column/demos/markdown.tsx index 43b497f..0d43ad2 100644 --- a/src/Column/demos/markdown.tsx +++ b/src/Column/demos/markdown.tsx @@ -1,5 +1,5 @@ import { Bubble, type BubbleProps } from '@ant-design/x'; -import { ChartType, Column, GPTVis, withChartCode } from '@antv/gpt-vis'; +import { ChartType, Column, GPTVisLite, withChartCode } from '@antv/gpt-vis'; import React from 'react'; const markdownContent = ` @@ -29,7 +29,7 @@ const CodeComponent = withChartCode({ }); const RenderMarkdown: BubbleProps['messageRender'] = (content) => ( - {content} + {content} ); export default () => ( diff --git a/src/Column/demos/stack.tsx b/src/Column/demos/stack.tsx index ec02f0c..aa70df2 100644 --- a/src/Column/demos/stack.tsx +++ b/src/Column/demos/stack.tsx @@ -1,5 +1,5 @@ import { Bubble, type BubbleProps } from '@ant-design/x'; -import { ChartType, Column, GPTVis, withChartCode } from '@antv/gpt-vis'; +import { ChartType, Column, GPTVisLite, withChartCode } from '@antv/gpt-vis'; import React from 'react'; const markdownContent = ` @@ -40,7 +40,7 @@ const CodeComponent = withChartCode({ }); const RenderMarkdown: BubbleProps['messageRender'] = (content) => ( - {content} + {content} ); export default () => ( diff --git a/src/DualAxes/demos/markdown.tsx b/src/DualAxes/demos/markdown.tsx index fc346ae..a9ae3fa 100644 --- a/src/DualAxes/demos/markdown.tsx +++ b/src/DualAxes/demos/markdown.tsx @@ -1,5 +1,5 @@ import { Bubble, type BubbleProps } from '@ant-design/x'; -import { ChartType, DualAxes, GPTVis, withChartCode } from '@antv/gpt-vis'; +import { ChartType, DualAxes, GPTVisLite, withChartCode } from '@antv/gpt-vis'; import React from 'react'; const markdownContent = ` @@ -39,7 +39,7 @@ const CodeComponent = withChartCode({ }); const RenderMarkdown: BubbleProps['messageRender'] = (content) => ( - {content} + {content} ); export default () => ( diff --git a/src/DualAxes/demos/multiple.tsx b/src/DualAxes/demos/multiple.tsx index 56ad3a0..3f50984 100644 --- a/src/DualAxes/demos/multiple.tsx +++ b/src/DualAxes/demos/multiple.tsx @@ -1,5 +1,5 @@ import { Bubble, type BubbleProps } from '@ant-design/x'; -import { ChartType, DualAxes, GPTVis, withChartCode } from '@antv/gpt-vis'; +import { ChartType, DualAxes, GPTVisLite, withChartCode } from '@antv/gpt-vis'; import React from 'react'; const markdownContent = ` @@ -96,7 +96,7 @@ const CodeComponent = withChartCode({ }); const RenderMarkdown: BubbleProps['messageRender'] = (content) => ( - {content} + {content} ); export default () => ( diff --git a/src/FlowDiagram/demos/markdown.tsx b/src/FlowDiagram/demos/markdown.tsx index 54fd245..7235a48 100644 --- a/src/FlowDiagram/demos/markdown.tsx +++ b/src/FlowDiagram/demos/markdown.tsx @@ -1,5 +1,5 @@ import { Bubble, type BubbleProps } from '@ant-design/x'; -import { ChartType, FlowDiagram, GPTVis, withChartCode } from '@antv/gpt-vis'; +import { ChartType, FlowDiagram, GPTVisLite, withChartCode } from '@antv/gpt-vis'; import React from 'react'; const markdownContent = ` @@ -43,7 +43,7 @@ const CodeComponent = withChartCode({ }); const RenderMarkdown: BubbleProps['messageRender'] = (content) => ( - {content} + {content} ); export default () => ( diff --git a/src/GPTVis/Lite.tsx b/src/GPTVis/Lite.tsx new file mode 100644 index 0000000..2ae3e60 --- /dev/null +++ b/src/GPTVis/Lite.tsx @@ -0,0 +1,32 @@ +import React, { memo } from 'react'; +import type { Options } from 'react-markdown'; +import Markdown from 'react-markdown'; +import rehypeRaw from 'rehype-raw'; + +export interface GPTVisLiteProps extends Options { + /** 自定义 markdown components样式 */ + components?: + | Options['components'] + | { + [key: string]: (props: any) => React.ReactNode; + }; +} + +const GPTVisLite: React.FC = ({ + children, + components, + rehypePlugins, + ...rest +}) => { + return ( + + {children} + + ); +}; + +export default memo(GPTVisLite); diff --git a/src/GPTVis/demos/code.tsx b/src/GPTVis/demos/code.tsx index e3de201..5d71435 100644 --- a/src/GPTVis/demos/code.tsx +++ b/src/GPTVis/demos/code.tsx @@ -1,5 +1,5 @@ import type { CodeBlockComponent } from '@antv/gpt-vis'; -import { ChartType, GPTVis, PinMap, withChartCode } from '@antv/gpt-vis'; +import { ChartType, GPTVisLite, Pie, withChartCode } from '@antv/gpt-vis'; import React from 'react'; /** @@ -8,11 +8,11 @@ import React from 'react'; const MyUIRenderer: CodeBlockComponent = ({ children }) => { return
{children}
; }; - +const customRenderers = { 'my-ui': MyUIRenderer }; const components = { code: withChartCode({ - languageRenderers: { kotlin: MyUIRenderer }, - components: { [ChartType.PinMap]: PinMap }, + languageRenderers: customRenderers, // register custom block renderer + components: { [ChartType.Pie]: Pie }, // register a pie chart }), }; @@ -23,22 +23,16 @@ my data ... \`\`\`vis-chart { - "type": "pin-map", - "data": [ - { "label": "杨梅岭", "longitude": 120.118362, "latitude": 30.217175 }, - { "label": "理安寺", "longitude": 120.112958, "latitude": 30.207319 }, - { "label": "九溪烟树", "longitude": 120.11335, "latitude": 30.202395 }, - { "label": "飞来峰", "longitude": 120.100549, "latitude": 30.236875 }, - { "label": "灵隐寺", "longitude": 120.101406, "latitude": 30.240826 }, - { "label": "天竺三寺", "longitude": 120.105337, "latitude": 30.236818 }, - { "label": "杭州植物园", "longitude": 120.116979, "latitude": 30.252876 }, - { "label": "杭州花圃", "longitude": 120.127654, "latitude": 30.245663 }, - { "label": "苏堤", "longitude": 120.135764, "latitude": 30.251448 }, - { "label": "虎跑公园", "longitude": 120.130095, "latitude": 30.207505 }, - { "label": "玉皇飞云", "longitude": 120.145323, "latitude": 30.214993 }, - { "label": "长桥公园", "longitude": 120.155057, "latitude": 30.232985 } + "type": "pie", + "data": [ + { "category": "分类一", "value": 27 }, + { "category": "分类二", "value": 25 }, + { "category": "分类三", "value": 18 }, + { "category": "分类四", "value": 15 }, + { "category": "分类五", "value": 10 }, + { "category": "其他", "value": 5 } ] } \`\`\` `; -export default () => {content}; +export default () => {content}; diff --git a/src/GPTVis/demos/default.tsx b/src/GPTVis/demos/default.tsx index aa340b6..800564b 100644 --- a/src/GPTVis/demos/default.tsx +++ b/src/GPTVis/demos/default.tsx @@ -10,8 +10,6 @@ const content = `# GPT-VIS \n\nComponents for GPTs, generative AI, and LLM proje { "category": "分类一", "value": 27 }, { "category": "分类二", "value": 25 }, { "category": "分类三", "value": 18 }, - { "category": "分类四", "value": 15 }, - { "category": "分类五", "value": 10 }, { "category": "其他", "value": 5 } ] } diff --git a/src/GPTVis/demos/tag.tsx b/src/GPTVis/demos/tag.tsx index 489ff0c..5ea0a76 100644 --- a/src/GPTVis/demos/tag.tsx +++ b/src/GPTVis/demos/tag.tsx @@ -1,4 +1,4 @@ -import { GPTVis, withDefaultChartCode } from '@antv/gpt-vis'; +import { GPTVisLite, withDefaultChartCode } from '@antv/gpt-vis'; import React from 'react'; const components = { @@ -45,4 +45,4 @@ Here’s a visualization of [Haidilao](/)'s food delivery revenue from 2013 to 2 } \`\`\` `; -export default () => {content}; +export default () => {content}; diff --git a/src/GPTVis/index.md b/src/GPTVis/index.md index 232d97a..291dc62 100644 --- a/src/GPTVis/index.md +++ b/src/GPTVis/index.md @@ -11,6 +11,8 @@ GPTVis 协议的 Markdown 渲染器，基于 Markdown 语法扩展 `vis-chart` ## 基础使用 +`GPTVis` 组件内置了[默认的图表](https://github.com/antvis/GPT-Vis/tree/main/src/export.ts#L76)，接入简单 + ## 自定义标签渲染 @@ -19,6 +21,8 @@ GPTVis 协议的 Markdown 渲染器，基于 Markdown 语法扩展 `vis-chart` ## 自定义 code 渲染块 +自定义代码块渲染，`GPTVisLite` 不内置图表组件，使用图表组件需要注册。 + ## API diff --git a/src/HeatMap/index.md b/src/HeatMap/index.md index 8bbcca6..1984622 100644 --- a/src/HeatMap/index.md +++ b/src/HeatMap/index.md @@ -52,7 +52,7 @@ export default () => ; ```tsx import { Bubble, type BubbleProps } from '@ant-design/x'; -import { HeatMap, withChartCode, ChartType, GPTVis } from '@antv/gpt-vis'; +import { HeatMap, withChartCode, ChartType, GPTVisLite } from '@antv/gpt-vis'; const bgStyle = { display: 'grid', @@ -157,7 +157,7 @@ const CodeComponent = withChartCode({ }); const RenderMarkdown: BubbleProps['messageRender'] = (content) => ( - {content} + {content} ); export default () => { diff --git a/src/Histogram/demos/markdown.tsx b/src/Histogram/demos/markdown.tsx index de7e0d9..7c07045 100644 --- a/src/Histogram/demos/markdown.tsx +++ b/src/Histogram/demos/markdown.tsx @@ -1,5 +1,5 @@ import { Bubble, type BubbleProps } from '@ant-design/x'; -import { ChartType, GPTVis, Histogram, withChartCode } from '@antv/gpt-vis'; +import { ChartType, GPTVisLite, Histogram, withChartCode } from '@antv/gpt-vis'; import React from 'react'; const markdownContent = ` @@ -317,7 +317,7 @@ const CodeComponent = withChartCode({ }); const RenderMarkdown: BubbleProps['messageRender'] = (content) => ( - {content} + {content} ); export default () => ( diff --git a/src/IndentedTree/demos/markdown.tsx b/src/IndentedTree/demos/markdown.tsx index 255326f..2bcbd49 100644 --- a/src/IndentedTree/demos/markdown.tsx +++ b/src/IndentedTree/demos/markdown.tsx @@ -1,5 +1,5 @@ import { Bubble, type BubbleProps } from '@ant-design/x'; -import { ChartType, GPTVis, IndentedTree, withChartCode } from '@antv/gpt-vis'; +import { ChartType, GPTVisLite, IndentedTree, withChartCode } from '@antv/gpt-vis'; import React from 'react'; const markdownContent = ` @@ -53,7 +53,7 @@ const CodeComponent = withChartCode({ }); const RenderMarkdown: BubbleProps['messageRender'] = (content) => ( - {content} + {content} ); export default () => ( diff --git a/src/Line/demos/category.tsx b/src/Line/demos/category.tsx index b6eac66..d7afb2e 100644 --- a/src/Line/demos/category.tsx +++ b/src/Line/demos/category.tsx @@ -1,5 +1,5 @@ import { Bubble, type BubbleProps } from '@ant-design/x'; -import { ChartType, GPTVis, Line, withChartCode } from '@antv/gpt-vis'; +import { ChartType, GPTVisLite, Line, withChartCode } from '@antv/gpt-vis'; import React from 'react'; const markdownContent = ` @@ -88,7 +88,7 @@ const CodeComponent = withChartCode({ }); const RenderMarkdown: BubbleProps['messageRender'] = (content) => ( - {content} + {content} ); export default () => ( diff --git a/src/Line/demos/markdown.tsx b/src/Line/demos/markdown.tsx index e1a1a1d..2810a1b 100644 --- a/src/Line/demos/markdown.tsx +++ b/src/Line/demos/markdown.tsx @@ -1,5 +1,5 @@ import { Bubble, type BubbleProps } from '@ant-design/x'; -import { ChartType, GPTVis, Line, withChartCode } from '@antv/gpt-vis'; +import { ChartType, GPTVisLite, Line, withChartCode } from '@antv/gpt-vis'; import React from 'react'; const markdownContent = ` @@ -29,7 +29,7 @@ const CodeComponent = withChartCode({ }); const RenderMarkdown: BubbleProps['messageRender'] = (content) => ( - {content} + {content} ); export default () => ( diff --git a/src/MindMap/demos/markdown.tsx b/src/MindMap/demos/markdown.tsx index c0cb9b5..84acb38 100644 --- a/src/MindMap/demos/markdown.tsx +++ b/src/MindMap/demos/markdown.tsx @@ -1,5 +1,5 @@ import { Bubble, type BubbleProps } from '@ant-design/x'; -import { ChartType, GPTVis, MindMap, withChartCode } from '@antv/gpt-vis'; +import { ChartType, GPTVisLite, MindMap, withChartCode } from '@antv/gpt-vis'; import React from 'react'; const markdownContent = ` @@ -49,7 +49,7 @@ const CodeComponent = withChartCode({ }); const RenderMarkdown: BubbleProps['messageRender'] = (content) => ( - {content} + {content} ); export default () => ( diff --git a/src/NetworkGraph/demos/markdown.tsx b/src/NetworkGraph/demos/markdown.tsx index e599b7b..5e28175 100644 --- a/src/NetworkGraph/demos/markdown.tsx +++ b/src/NetworkGraph/demos/markdown.tsx @@ -1,5 +1,5 @@ import { Bubble, type BubbleProps } from '@ant-design/x'; -import { ChartType, GPTVis, NetworkGraph, withChartCode } from '@antv/gpt-vis'; +import { ChartType, GPTVisLite, NetworkGraph, withChartCode } from '@antv/gpt-vis'; import React from 'react'; const markdownContent = ` @@ -40,7 +40,7 @@ const CodeComponent = withChartCode({ }); const RenderMarkdown: BubbleProps['messageRender'] = (content) => ( - {content} + {content} ); export default () => ( diff --git a/src/OrganizationChart/demos/markdown.tsx b/src/OrganizationChart/demos/markdown.tsx index 2aaf432..82c42a8 100644 --- a/src/OrganizationChart/demos/markdown.tsx +++ b/src/OrganizationChart/demos/markdown.tsx @@ -1,5 +1,5 @@ import { Bubble, type BubbleProps } from '@ant-design/x'; -import { ChartType, GPTVis, OrganizationChart, withChartCode } from '@antv/gpt-vis'; +import { ChartType, GPTVisLite, OrganizationChart, withChartCode } from '@antv/gpt-vis'; import React from 'react'; const markdownContent = ` @@ -36,7 +36,7 @@ const CodeComponent = withChartCode({ }); const RenderMarkdown: BubbleProps['messageRender'] = (content) => ( - {content} + {content} ); export default () => ( diff --git a/src/PathMap/demos/markdown.tsx b/src/PathMap/demos/markdown.tsx index def92e9..1e89b5b 100644 --- a/src/PathMap/demos/markdown.tsx +++ b/src/PathMap/demos/markdown.tsx @@ -1,5 +1,5 @@ import { Bubble, type BubbleProps } from '@ant-design/x'; -import { ChartType, ConfigProvider, GPTVis, PathMap, withChartCode } from '@antv/gpt-vis'; +import { ChartType, ConfigProvider, GPTVisLite, PathMap, withChartCode } from '@antv/gpt-vis'; import React from 'react'; const bgStyle = { @@ -121,7 +121,7 @@ const CodeComponent = withChartCode({ }); const RenderMarkdown: BubbleProps['messageRender'] = (content) => ( - {content} + {content} ); export default () => { diff --git a/src/Pie/demos/markdown.tsx b/src/Pie/demos/markdown.tsx index 6ba190b..4a00dbd 100644 --- a/src/Pie/demos/markdown.tsx +++ b/src/Pie/demos/markdown.tsx @@ -1,5 +1,5 @@ import { Bubble, type BubbleProps } from '@ant-design/x'; -import { ChartType, GPTVis, Pie, withChartCode } from '@antv/gpt-vis'; +import { ChartType, GPTVisLite, Pie, withChartCode } from '@antv/gpt-vis'; import React from 'react'; const markdownContent = ` @@ -35,7 +35,7 @@ const CodeComponent = withChartCode({ }); const RenderMarkdown: BubbleProps['messageRender'] = (content) => ( - {content} + {content} ); export default () => ( diff --git a/src/PinMap/demos/markdown.tsx b/src/PinMap/demos/markdown.tsx index f40734e..fb979b3 100644 --- a/src/PinMap/demos/markdown.tsx +++ b/src/PinMap/demos/markdown.tsx @@ -1,5 +1,5 @@ import { Bubble, type BubbleProps } from '@ant-design/x'; -import { ChartType, ConfigProvider, GPTVis, PinMap, withChartCode } from '@antv/gpt-vis'; +import { ChartType, ConfigProvider, GPTVisLite, PinMap, withChartCode } from '@antv/gpt-vis'; import React from 'react'; const bgStyle = { @@ -11,7 +11,7 @@ const bgStyle = { }; const RenderMarkdown: BubbleProps['messageRender'] = (content) => ( - {content} + {content} ); const markdownContent = ` diff --git a/src/Radar/demos/category.tsx b/src/Radar/demos/category.tsx index dcc0612..bdaf4e7 100644 --- a/src/Radar/demos/category.tsx +++ b/src/Radar/demos/category.tsx @@ -1,5 +1,5 @@ import { Bubble, type BubbleProps } from '@ant-design/x'; -import { ChartType, GPTVis, Radar, withChartCode } from '@antv/gpt-vis'; +import { ChartType, GPTVisLite, Radar, withChartCode } from '@antv/gpt-vis'; import React from 'react'; const markdownContent = ` @@ -39,7 +39,7 @@ const CodeComponent = withChartCode({ }); const RenderMarkdown: BubbleProps['messageRender'] = (content) => ( - {content} + {content} ); export default () => ( diff --git a/src/Radar/demos/markdown.tsx b/src/Radar/demos/markdown.tsx index 3fe498f..fa55cc6 100644 --- a/src/Radar/demos/markdown.tsx +++ b/src/Radar/demos/markdown.tsx @@ -1,5 +1,5 @@ import { Bubble, type BubbleProps } from '@ant-design/x'; -import { ChartType, GPTVis, Radar, withChartCode } from '@antv/gpt-vis'; +import { ChartType, GPTVisLite, Radar, withChartCode } from '@antv/gpt-vis'; import React from 'react'; const markdownContent = ` @@ -33,7 +33,7 @@ const CodeComponent = withChartCode({ }); const RenderMarkdown: BubbleProps['messageRender'] = (content) => ( - {content} + {content} ); export default () => ( diff --git a/src/Scatter/demos/markdown.tsx b/src/Scatter/demos/markdown.tsx index 3aaa2d8..dd17174 100644 --- a/src/Scatter/demos/markdown.tsx +++ b/src/Scatter/demos/markdown.tsx @@ -1,5 +1,5 @@ import { Bubble, type BubbleProps } from '@ant-design/x'; -import { ChartType, GPTVis, Scatter, withChartCode } from '@antv/gpt-vis'; +import { ChartType, GPTVisLite, Scatter, withChartCode } from '@antv/gpt-vis'; import React from 'react'; const markdownContent = ` @@ -79,7 +79,7 @@ const CodeComponent = withChartCode({ }); const RenderMarkdown: BubbleProps['messageRender'] = (content) => ( - {content} + {content} ); export default () => ( diff --git a/src/Treemap/demos/markdown.tsx b/src/Treemap/demos/markdown.tsx index 79b343f..4e5e4cd 100644 --- a/src/Treemap/demos/markdown.tsx +++ b/src/Treemap/demos/markdown.tsx @@ -1,5 +1,5 @@ import { Bubble, type BubbleProps } from '@ant-design/x'; -import { ChartType, GPTVis, Treemap, withChartCode } from '@antv/gpt-vis'; +import { ChartType, GPTVisLite, Treemap, withChartCode } from '@antv/gpt-vis'; import React from 'react'; const markdownContent = ` @@ -37,7 +37,7 @@ const CodeComponent = withChartCode({ }); const RenderMarkdown: BubbleProps['messageRender'] = (content) => ( - {content} + {content} ); export default () => ( diff --git a/src/WordCloud/index.md b/src/WordCloud/index.md index 484ae0b..a9ba2b3 100644 --- a/src/WordCloud/index.md +++ b/src/WordCloud/index.md @@ -123,7 +123,7 @@ export default () => ; ```tsx import { Bubble, type BubbleProps } from '@ant-design/x'; -import { WordCloud, withChartCode, ChartType, GPTVis } from '@antv/gpt-vis'; +import { WordCloud, withChartCode, ChartType, GPTVisLite } from '@antv/gpt-vis'; const bgStyle = { display: 'grid', @@ -170,7 +170,7 @@ const CodeComponent = withChartCode({ }); const RenderMarkdown: BubbleProps['messageRender'] = (content) => ( - {content} + {content} ); export default () => { diff --git a/src/index.ts b/src/index.ts index 9ca8e80..1216fcf 100644 --- a/src/index.ts +++ b/src/index.ts @@ -4,5 +4,6 @@ export { default as version } from './version'; export { withChartCode, withDefaultChartCode } from './ChartCodeRender'; export type { CodeBlockComponent, WithChartCodeOptions } from './ChartCodeRender/type'; export { default as GPTVis, type GPTVisProps } from './GPTVis'; +export { default as GPTVisLite, type GPTVisLiteProps } from './GPTVis/Lite'; export * from './types'; From 61303fbfdf62d9f8ec8ed57648cc9143a828ab63 Mon Sep 17 00:00:00 2001 From: yunji Date: Tue, 19 Nov 2024 16:47:20 +0800 Subject: [PATCH 2/2] chore: export order --- .changeset/witty-camels-stare.md | 5 +++++ src/GPTVis/index.tsx | 23 +++++------------------ src/export.ts | 24 ++++++++++++++---------- src/index.ts | 9 +++++++-- 4 files changed, 31 insertions(+), 30 deletions(-) create mode 100644 .changeset/witty-camels-stare.md diff --git a/.changeset/witty-camels-stare.md b/.changeset/witty-camels-stare.md new file mode 100644 index 0000000..f8abe1b --- /dev/null +++ b/.changeset/witty-camels-stare.md @@ -0,0 +1,5 @@ +--- +'@antv/gpt-vis': minor +--- + +lite component for GPTVis diff --git a/src/GPTVis/index.tsx b/src/GPTVis/index.tsx index 040ad00..19940b6 100644 --- a/src/GPTVis/index.tsx +++ b/src/GPTVis/index.tsx @@ -1,29 +1,16 @@ import React, { memo } from 'react'; -import type { Options } from 'react-markdown'; -import Markdown from 'react-markdown'; -import rehypeRaw from 'rehype-raw'; import { withDefaultChartCode } from '../ChartCodeRender'; +import { default as GPTVisLite, type GPTVisLiteProps } from './Lite'; -export interface GPTVisProps extends Options { - /** 自定义 markdown components样式 */ - components?: - | Options['components'] - | { - [key: string]: (props: any) => React.ReactNode; - }; -} +export interface GPTVisProps extends GPTVisLiteProps {} const CodeBlock = withDefaultChartCode(); -const GPTVis: React.FC = ({ children, components, rehypePlugins, ...rest }) => { +const GPTVis: React.FC = ({ children, components, ...rest }) => { return ( - + {children} - + ); }; diff --git a/src/export.ts b/src/export.ts index aeff9d9..f84ce1e 100644 --- a/src/export.ts +++ b/src/export.ts @@ -1,27 +1,33 @@ +/********** plot chart **********/ import { default as Area, type AreaProps } from './Area'; import { default as Bar, type BarProps } from './Bar'; import { default as Column, type ColumnProps } from './Column'; import { default as DualAxes, type DualAxesProps } from './DualAxes'; -import { default as FlowDiagram, type FlowDiagramProps } from './FlowDiagram'; import { default as HeatMap, type HeatMapProps } from './HeatMap'; import { default as Histogram, type HistogramProps } from './Histogram'; import { default as Line, type LineProps } from './Line'; -import { default as MindMap, type MindMapProps } from './MindMap'; -import { default as NetworkGraph, type NetworkGraphProps } from './NetworkGraph'; -import { default as PathMap, type PathMapProps } from './PathMap'; import { default as Pie, type PieProps } from './Pie'; -import { default as PinMap, type PinMapProps } from './PinMap'; import { default as Radar, type RadarProps } from './Radar'; import { default as Scatter, type ScatterProps } from './Scatter'; import { default as Treemap, type TreemapProps } from './Treemap'; -import { ChartType } from './types'; import { default as WordCloud, type WordCloudProps } from './WordCloud'; -export { default as ConfigProvider, type ConfigProviderProps } from './ConfigProvider'; +/********** graph chart **********/ +import { default as FlowDiagram, type FlowDiagramProps } from './FlowDiagram'; +import { default as MindMap, type MindMapProps } from './MindMap'; +import { default as NetworkGraph, type NetworkGraphProps } from './NetworkGraph'; +import { default as PathMap, type PathMapProps } from './PathMap'; +import { default as PinMap, type PinMapProps } from './PinMap'; +import { ChartType } from './types'; export { default as IndentedTree, type IndentedTreeProps } from './IndentedTree'; -export { default as Map, type MapProps } from './Map'; export { default as OrganizationChart, type OrganizationChartProps } from './OrganizationChart'; +/********** map chart **********/ +export { default as Map, type MapProps } from './Map'; + +/********** NTV **********/ +export { VisText, type VisTextProps } from './Text'; + export { Area, Bar, @@ -59,8 +65,6 @@ export { type WordCloudProps, }; -export { VisText, type VisTextProps } from './Text'; - export const DEFAULT_CHART_COMPONENTS: Record> = { [ChartType.Line]: Line, [ChartType.Column]: Column, diff --git a/src/index.ts b/src/index.ts index 1216fcf..5fbf487 100644 --- a/src/index.ts +++ b/src/index.ts @@ -1,9 +1,14 @@ +/********** export chart **********/ export * from './export'; -export { default as version } from './version'; +/********** export types **********/ +export * from './types'; + +/********** export GPTVis **********/ export { withChartCode, withDefaultChartCode } from './ChartCodeRender'; export type { CodeBlockComponent, WithChartCodeOptions } from './ChartCodeRender/type'; +export { default as ConfigProvider, type ConfigProviderProps } from './ConfigProvider'; export { default as GPTVis, type GPTVisProps } from './GPTVis'; export { default as GPTVisLite, type GPTVisLiteProps } from './GPTVis/Lite'; -export * from './types'; +export { default as version } from './version';