From a10ea8b2bf039a0d643a0326e02790592b8468b7 Mon Sep 17 00:00:00 2001 From: yunji Date: Fri, 13 Dec 2024 18:01:39 +0800 Subject: [PATCH] docs: custom ui --- .dumirc.ts | 3 +- docs/guide/custom-ui.md | 48 ++++++++++++++++++++++++++ docs/guide/customize-style.md | 2 ++ docs/guide/demos/WeatherCard/index.tsx | 16 ++++----- docs/guide/demos/WeatherCard/style.ts | 41 +++++----------------- docs/guide/demos/custom-ui.tsx | 36 ++++++++++--------- docs/guide/quick-start.md | 2 -- src/Area/index.md | 1 + src/Bar/index.md | 1 + src/ChartCodeRender/index.md | 1 + src/Column/index.md | 1 + src/ConfigProvider/index.md | 1 + src/DualAxes/index.md | 1 + src/FishboneDiagram/index.md | 1 + src/FlowDiagram/index.md | 1 + src/GPTVis/index.md | 1 + src/HeatMap/index.md | 1 + src/Histogram/index.md | 1 + src/IndentedTree/index.md | 1 + src/Line/index.md | 1 + src/Map/index.md | 1 + src/MindMap/index.md | 1 + src/NetworkGraph/index.md | 1 + src/OrganizationChart/index.md | 1 + src/PathMap/index.md | 1 + src/Pie/index.md | 1 + src/PinMap/index.md | 1 + src/Radar/index.md | 1 + src/Scatter/index.md | 1 + src/Text/index.md | 1 + src/Treemap/index.md | 1 + src/WordCloud/index.md | 1 + 32 files changed, 113 insertions(+), 60 deletions(-) create mode 100644 docs/guide/custom-ui.md diff --git a/.dumirc.ts b/.dumirc.ts index 43af4e7..5040b7e 100644 --- a/.dumirc.ts +++ b/.dumirc.ts @@ -13,6 +13,7 @@ Powered by AntV`, socialLinks: { github: 'https://github.com/antvis/GPT-Vis', }, + prefersColor: { default: 'light', switch: false }, }, // ssr: // process.env.NODE_ENV === 'production' @@ -31,6 +32,6 @@ Powered by AntV`, '@c-primary': '#691eff', '@s-content-width': '100%', '@s-content-padding': '48px', - '@s-sidebar-width': '300px', + '@s-sidebar-width': '280px', }, }); diff --git a/docs/guide/custom-ui.md b/docs/guide/custom-ui.md new file mode 100644 index 0000000..61d95d3 --- /dev/null +++ b/docs/guide/custom-ui.md @@ -0,0 +1,48 @@ +--- +title: 定制模型输出 UI +nav: { title: '指南', order: 0 } +toc: content +order: 1 +--- + +## 定制模型输出 UI + +为模型输出的结构化数据，通过代码块的方式定制 UI。 + +```tsx | pure +import { GPTVisLite, withChartCode } from '@antv/gpt-vis'; + +const markdownContent = ` +\`\`\`weather +{ + "locationName": "Hangzhou", + "temperature": 11.4, + "humidity": 82, + "wind": 6.8, + "cloudiness": 75, + "uv": "0.2 of 11" +} +\`\`\` + +In Hangzhou, the current weather is as follows: +- The temperature is 11.4°C, humidity is 82%, and wind speed is 6.8 kph. +- There's 75% cloud cover, and the UV index is very low at 0.2 out of 11. +- This indicates cool, humid conditions with overcast skies and minimal UV exposure. +`; + +const customRenderers = { + weather: (props) => 'WeatherCard', +}; +const components = { + code: withChartCode({ + // register custom block renderer + languageRenderers: customRenderers, + }), +}; + +export default () => { + return {markdownContent}; +}; +``` + + diff --git a/docs/guide/customize-style.md b/docs/guide/customize-style.md index c00d354..d0d637f 100644 --- a/docs/guide/customize-style.md +++ b/docs/guide/customize-style.md @@ -5,6 +5,8 @@ toc: content order: 3 --- +# 定制图表样式 + 通过在 [ConfigProvider](/components/config-provider) 中传入样式属性，来配置图表组件的全局样式。 ## 定制组件级样式 diff --git a/docs/guide/demos/WeatherCard/index.tsx b/docs/guide/demos/WeatherCard/index.tsx index 4b9aaa1..872dbf2 100644 --- a/docs/guide/demos/WeatherCard/index.tsx +++ b/docs/guide/demos/WeatherCard/index.tsx @@ -28,15 +28,13 @@ const WeatherCard: CodeBlockComponent = (props) => { Wind {wind}kph -
-
- Cloudiness - {cloudiness}% -
-
- UV Index - {uv} -
+
+ Cloudiness + {cloudiness}% +
+
+ UV Index + {uv}
diff --git a/docs/guide/demos/WeatherCard/style.ts b/docs/guide/demos/WeatherCard/style.ts index c3d2cda..f5312ce 100644 --- a/docs/guide/demos/WeatherCard/style.ts +++ b/docs/guide/demos/WeatherCard/style.ts @@ -1,28 +1,26 @@ import { styled } from 'styled-components'; const StyledComponent = styled.div` - width: 424px; - padding: 2px; + width: 560px; background-color: #60a5fa; + border-radius: 10px; .locationSection { display: flex; flex-direction: column; - padding: 18px 18px 14px 10px; - border-radius: 10px; + padding: 18px 25px; } .temperatureWrapper { display: flex; align-items: center; justify-content: space-between; - margin-left: 12px; } .temperatureDetails { display: flex; align-items: center; - gap: 22px; + gap: 40px; } .imageIcon { @@ -34,13 +32,13 @@ const StyledComponent = styled.div` .currentTemperature { color: #feffff; - font-size: 28px; + font-size: 25px; font-weight: bold; } .locationName { - color: #60a5fa; - font-size: 14px; + color: #feffff; + font-size: 24px; font-weight: bold; } @@ -48,8 +46,8 @@ const StyledComponent = styled.div` display: flex; align-items: center; margin-top: 16px; - padding-right: 2px; - padding-left: 2px; + justify-content: space-between; + font-size: 14px; } .humiditySection { @@ -57,17 +55,13 @@ const StyledComponent = styled.div` flex-direction: column; align-items: flex-start; min-width: 82px; - padding-right: 8px; - padding-left: 2px; } .attributeLabel { min-width: 56px; margin-right: 2px; margin-left: 2px; - background-color: #7fb6fb; color: #dbeafe; - font-size: 12px; } .uvIndexValue { @@ -80,59 +74,42 @@ const StyledComponent = styled.div` flex-direction: column; align-items: flex-start; margin-left: 20px; - padding-right: 10px; - padding-left: 4px; } .windSpeedLabel { color: #dbeafe; - font-size: 14px; } .windSpeedValue { color: #feffff; - font-size: 14px; - } - - .additionalInfo { - display: flex; - margin-left: 2px; - gap: 26px; } .cloudinessSection { display: flex; flex-direction: column; - padding-right: 2px; - padding-left: 2px; } .cloudinessLabel { color: #dbeafe; - font-size: 12px; } .cloudinessValue { align-self: flex-start; color: #fff; - font-size: 12px; } .uvIndexSection { display: flex; flex-direction: column; - padding-right: 2px; } .uvIndexLabel { margin-left: 2px; color: #dbeafe; - font-size: 12px; } .uvIndexValue { color: #fff; - font-size: 12px; } `; diff --git a/docs/guide/demos/custom-ui.tsx b/docs/guide/demos/custom-ui.tsx index 79071ab..4a61277 100644 --- a/docs/guide/demos/custom-ui.tsx +++ b/docs/guide/demos/custom-ui.tsx @@ -1,11 +1,12 @@ -import { ChartType, GPTVisLite, Pie, withChartCode } from '@antv/gpt-vis'; +import { Bubble } from '@ant-design/x'; +import { GPTVisLite, withChartCode } from '@antv/gpt-vis'; import React from 'react'; import WeatherCard from './WeatherCard'; const markdownContent = ` \`\`\`weather { - "locationName": "Hngzhou", + "locationName": "Hangzhou", "temperature": 11.4, "humidity": 82, "wind": 6.8, @@ -14,17 +15,10 @@ const markdownContent = ` } \`\`\` -\`\`\`vis-chart -{ - "type": "pie", - "data": [ - { "category": "分类一", "value": 27 }, - { "category": "分类二", "value": 25 }, - { "category": "分类三", "value": 18 }, - { "category": "其他", "value": 5 } - ] -} -\`\`\` +In Hangzhou, the current weather is as follows: +- The temperature is 11.4°C, humidity is 82%, and wind speed is 6.8 kph. +- There's 75% cloud cover, and the UV index is very low at 0.2 out of 11. +- This indicates cool, humid conditions with overcast skies and minimal UV exposure. `; const customRenderers = { @@ -34,11 +28,21 @@ const components = { code: withChartCode({ // register custom block renderer languageRenderers: customRenderers, - // register a pie chart - components: { [ChartType.Pie]: Pie }, }), }; +const bgStyle = { + display: 'grid', + gridGap: '20px 0', + padding: 20, + borderRadius: 8, +}; + export default () => { - return {markdownContent}; + return ( +
+ + {markdownContent}} /> +
+ ); }; diff --git a/docs/guide/quick-start.md b/docs/guide/quick-start.md index f68b6ff..f2be67f 100644 --- a/docs/guide/quick-start.md +++ b/docs/guide/quick-start.md @@ -87,5 +87,3 @@ export default () => { return {markdownContent}; }; ``` - - diff --git a/src/Area/index.md b/src/Area/index.md index 1dc975e..9cfe2fc 100644 --- a/src/Area/index.md +++ b/src/Area/index.md @@ -4,6 +4,7 @@ group: order: 1 title: 统计图 demo: { cols: 2 } +toc: content nav: { title: '组件', order: 1 } --- diff --git a/src/Bar/index.md b/src/Bar/index.md index 49a65e4..20c2cd0 100644 --- a/src/Bar/index.md +++ b/src/Bar/index.md @@ -3,6 +3,7 @@ order: 4 group: order: 1 title: 统计图 +toc: content demo: { cols: 2 } --- diff --git a/src/ChartCodeRender/index.md b/src/ChartCodeRender/index.md index 1929c59..545a8f8 100644 --- a/src/ChartCodeRender/index.md +++ b/src/ChartCodeRender/index.md @@ -1,5 +1,6 @@ --- order: 2 +toc: content group: order: 10 title: 其他 diff --git a/src/Column/index.md b/src/Column/index.md index 5c6cfb8..bb3ffa2 100644 --- a/src/Column/index.md +++ b/src/Column/index.md @@ -1,5 +1,6 @@ --- order: 2 +toc: content group: order: 1 title: 统计图 diff --git a/src/ConfigProvider/index.md b/src/ConfigProvider/index.md index 7a4e59c..e77b2c7 100644 --- a/src/ConfigProvider/index.md +++ b/src/ConfigProvider/index.md @@ -1,5 +1,6 @@ --- order: 3 +toc: content group: order: 10 title: 其他 diff --git a/src/DualAxes/index.md b/src/DualAxes/index.md index 81a311f..f962643 100644 --- a/src/DualAxes/index.md +++ b/src/DualAxes/index.md @@ -4,6 +4,7 @@ group: order: 1 title: 统计图 demo: { cols: 2 } +toc: content --- # DualAxes 双轴图 diff --git a/src/FishboneDiagram/index.md b/src/FishboneDiagram/index.md index f49b8b4..0b768b0 100644 --- a/src/FishboneDiagram/index.md +++ b/src/FishboneDiagram/index.md @@ -3,6 +3,7 @@ order: 6 group: order: 4 title: 关系图 +toc: content --- # FishboneDiagram 鱼骨图 diff --git a/src/FlowDiagram/index.md b/src/FlowDiagram/index.md index 816f8ea..d557c9d 100644 --- a/src/FlowDiagram/index.md +++ b/src/FlowDiagram/index.md @@ -3,6 +3,7 @@ order: 2 group: order: 3 title: 关系图 +toc: content --- # FlowDiagram 流程图 diff --git a/src/GPTVis/index.md b/src/GPTVis/index.md index 291dc62..40e5c81 100644 --- a/src/GPTVis/index.md +++ b/src/GPTVis/index.md @@ -3,6 +3,7 @@ order: 1 group: order: 10 title: 其他 +toc: content --- # GPTVis 协议渲染器 diff --git a/src/HeatMap/index.md b/src/HeatMap/index.md index 1984622..983dec5 100644 --- a/src/HeatMap/index.md +++ b/src/HeatMap/index.md @@ -3,6 +3,7 @@ order: 3 group: order: 2 title: 地图 +toc: content --- # HeatMap 热力地图 diff --git a/src/Histogram/index.md b/src/Histogram/index.md index 838f19f..ef3d94a 100644 --- a/src/Histogram/index.md +++ b/src/Histogram/index.md @@ -4,6 +4,7 @@ group: order: 1 title: 统计图 demo: { cols: 2 } +toc: content --- # Histogram 直方图 diff --git a/src/IndentedTree/index.md b/src/IndentedTree/index.md index 84e6ef1..711b394 100644 --- a/src/IndentedTree/index.md +++ b/src/IndentedTree/index.md @@ -4,6 +4,7 @@ group: order: 3 title: 关系图 demo: { cols: 2 } +toc: content --- # IndentedTree 缩进树 diff --git a/src/Line/index.md b/src/Line/index.md index 99f9929..5b109e8 100644 --- a/src/Line/index.md +++ b/src/Line/index.md @@ -3,6 +3,7 @@ order: 1 group: order: 1 title: 统计图 +toc: content demo: { cols: 2 } --- diff --git a/src/Map/index.md b/src/Map/index.md index 2e99e71..1d92476 100644 --- a/src/Map/index.md +++ b/src/Map/index.md @@ -3,6 +3,7 @@ order: 1 group: order: 2 title: 地图 +toc: content debug: true --- diff --git a/src/MindMap/index.md b/src/MindMap/index.md index 6707ed0..4f5f307 100644 --- a/src/MindMap/index.md +++ b/src/MindMap/index.md @@ -3,6 +3,7 @@ order: 1 group: order: 3 title: 关系图 +toc: content --- # MindMap 思维导图 diff --git a/src/NetworkGraph/index.md b/src/NetworkGraph/index.md index df22035..8c8bee4 100644 --- a/src/NetworkGraph/index.md +++ b/src/NetworkGraph/index.md @@ -3,6 +3,7 @@ order: 1 group: order: 3 title: 关系图 +toc: content --- # NetworkGraph 网络图 diff --git a/src/OrganizationChart/index.md b/src/OrganizationChart/index.md index 4aef93e..b184f52 100644 --- a/src/OrganizationChart/index.md +++ b/src/OrganizationChart/index.md @@ -3,6 +3,7 @@ order: 4 group: order: 3 title: 关系图 +toc: content --- # OrganizationChart 组织架构图 diff --git a/src/PathMap/index.md b/src/PathMap/index.md index 85f461b..b9c41ac 100644 --- a/src/PathMap/index.md +++ b/src/PathMap/index.md @@ -4,6 +4,7 @@ group: order: 2 title: 地图 demo: { cols: 2 } +toc: content --- # PathMap 路径地图 diff --git a/src/Pie/index.md b/src/Pie/index.md index 968fd79..03360b6 100644 --- a/src/Pie/index.md +++ b/src/Pie/index.md @@ -3,6 +3,7 @@ order: 3 group: order: 1 title: 统计图 +toc: content --- # Pie 饼图 diff --git a/src/PinMap/index.md b/src/PinMap/index.md index ff6dbd7..06a93a8 100644 --- a/src/PinMap/index.md +++ b/src/PinMap/index.md @@ -4,6 +4,7 @@ group: order: 2 title: 地图 demo: { cols: 2 } +toc: content --- # PinMap 点标注地图 diff --git a/src/Radar/index.md b/src/Radar/index.md index 9b573be..7b463ec 100644 --- a/src/Radar/index.md +++ b/src/Radar/index.md @@ -4,6 +4,7 @@ group: order: 1 title: 统计图 demo: { cols: 2 } +toc: content --- # Radar 雷达图 diff --git a/src/Scatter/index.md b/src/Scatter/index.md index e7c57a2..fd3dd25 100644 --- a/src/Scatter/index.md +++ b/src/Scatter/index.md @@ -4,6 +4,7 @@ group: order: 1 title: 统计图 demo: { cols: 2 } +toc: content --- # Scatter 散点图 diff --git a/src/Text/index.md b/src/Text/index.md index 3c1d3cb..93e7b17 100644 --- a/src/Text/index.md +++ b/src/Text/index.md @@ -3,6 +3,7 @@ order: 1 group: order: 3 title: 文本 +toc: content --- # VisText 文本 diff --git a/src/Treemap/index.md b/src/Treemap/index.md index 436e042..ab98460 100644 --- a/src/Treemap/index.md +++ b/src/Treemap/index.md @@ -4,6 +4,7 @@ group: order: 1 title: 统计图 demo: { cols: 2 } +toc: content --- # Treemap 矩阵树图 diff --git a/src/WordCloud/index.md b/src/WordCloud/index.md index a9ba2b3..969f9b1 100644 --- a/src/WordCloud/index.md +++ b/src/WordCloud/index.md @@ -3,6 +3,7 @@ order: 7 group: order: 1 title: 统计图 +toc: content --- # WordCloud 词云图