feat: lite render GPTVis

antvis · Nov 18, 2024 · 05abde2 · 05abde2
1 parent 04175c3
commit 05abde2
Show file tree

Hide file tree

Showing 41 changed files with 203 additions and 115 deletions.
diff --git 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 = `
-<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
 \`\`\`
+
+\`\`\`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 }) => <div>{children}</div> };
 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 <GPTVis components={components}>{markdownContent}</GPTVis>;
+  return <GPTVisLite components={components}>{markdownContent}</GPTVisLite>;
 };
 ```
 

diff --git 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 = `
-<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
 \`\`\`
+
+\`\`\`vis-chart
+{
+  "type": "pie",
+  "data": [
+    { "category": "分类一", "value": 27 },
+    { "category": "分类二", "value": 25 },
+    { "category": "分类三", "value": 18 },
+    { "category": "其他", "value": 5 }
+  ]
+}
+\`\`\`
 `;
 
 const customRenderers = { 'my-ui': ({ children }) => <div>{children}</div> };
 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 <GPTVis components={components}>{markdownContent}</GPTVis>;
+  return <GPTVisLite components={components}>{markdownContent}</GPTVisLite>;
 };
 ```
 

diff --git 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
 \`\`\`
 
-<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": [
+    { "category": "分类一", "value": 27 },
+    { "category": "分类二", "value": 25 },
+    { "category": "分类三", "value": 18 },
+    { "category": "其他", "value": 5 }
+  ]
+}
+\`\`\`
 `;
 
 const customRenderers = {
   'my-ui': ({ children }) => <div>{children}</div>,
 };
 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 <GPTVis components={components}>{markdownContent}</GPTVis>;
+  return <GPTVisLite components={components}>{markdownContent}</GPTVisLite>;
 };
 ```
diff --git 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
@@ -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) => (
-  <GPTVis components={{ code: CodeComponent }}>{content}</GPTVis>
+  <GPTVisLite components={{ code: CodeComponent }}>{content}</GPTVisLite>
 );
 
 export default () => (

diff --git 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) => (
-  <GPTVis components={{ code: CodeComponent }}>{content}</GPTVis>
+  <GPTVisLite components={{ code: CodeComponent }}>{content}</GPTVisLite>
 );
 
 export default () => (

diff --git 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) => (
-  <GPTVis components={{ code: CodeComponent }}>{content}</GPTVis>
+  <GPTVisLite components={{ code: CodeComponent }}>{content}</GPTVisLite>
 );
 
 export default () => (

diff --git 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) => (
-  <GPTVis components={{ code: CodeComponent }}>{content}</GPTVis>
+  <GPTVisLite components={{ code: CodeComponent }}>{content}</GPTVisLite>
 );
 
 export default () => (

diff --git 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) => (
-  <GPTVis components={{ code: CodeComponent }}>{content}</GPTVis>
+  <GPTVisLite components={{ code: CodeComponent }}>{content}</GPTVisLite>
 );
 
 export default () => (

diff --git 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 (
-    <GPTVis
+    <GPTVisLite
       components={{
         code: CodeComponent,
       }}
     >
       {markdownContent}
-    </GPTVis>
+    </GPTVisLite>
   );
 };
diff --git 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 () => (
   <div>
-    <GPTVis>{commonString}</GPTVis>
-    <GPTVis
+    <GPTVisLite>{commonString}</GPTVisLite>
+    <GPTVisLite
       components={{
         code: CodeComponent,
       }}
     >
       {markdownContent}
-    </GPTVis>
+    </GPTVisLite>
   </div>
 );
diff --git 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 () => (
   <div>
-    <GPTVis
+    <GPTVisLite
       components={{
         code: CodeComponent,
       }}
     >
       {markdownContent}
-    </GPTVis>
+    </GPTVisLite>
   </div>
 );
diff --git 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) => (
-  <GPTVis components={{ code: CodeComponent }}>{content}</GPTVis>
+  <GPTVisLite components={{ code: CodeComponent }}>{content}</GPTVisLite>
 );
 
 const useStreamText = () => {

diff --git 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) => (
-  <GPTVis components={{ code: CodeComponent }}>{content}</GPTVis>
+  <GPTVisLite components={{ code: CodeComponent }}>{content}</GPTVisLite>
 );
 
 export default () => (

diff --git 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) => (
-  <GPTVis components={{ code: CodeComponent }}>{content}</GPTVis>
+  <GPTVisLite components={{ code: CodeComponent }}>{content}</GPTVisLite>
 );
 
 export default () => (