From 3a20fc22516fe2532231c71eb625091193f350c8 Mon Sep 17 00:00:00 2001 From: lvisei Date: Fri, 13 Dec 2024 18:45:12 +0800 Subject: [PATCH] docs: add custom ui demo (#60) * wip: docs for custom ui * docs: custom ui * chore: type * chore: useGraphConfig type --- .dumirc.ts | 3 +- docs/guide/custom-ui.md | 48 ++++++++++ docs/guide/customize-style.md | 4 +- docs/guide/demos/WeatherCard/index.tsx | 45 ++++++++++ docs/guide/demos/WeatherCard/style.ts | 116 +++++++++++++++++++++++++ docs/guide/demos/custom-ui.tsx | 48 ++++++++++ mako.config.json | 3 + src/Area/index.md | 1 + src/Bar/index.md | 1 + src/ChartCodeRender/index.md | 1 + src/Column/index.md | 1 + src/ConfigProvider/hooks/useConfig.ts | 2 +- 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 + tsconfig.json | 2 +- 34 files changed, 292 insertions(+), 4 deletions(-) create mode 100644 docs/guide/custom-ui.md create mode 100644 docs/guide/demos/WeatherCard/index.tsx create mode 100644 docs/guide/demos/WeatherCard/style.ts create mode 100644 docs/guide/demos/custom-ui.tsx 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 754f27a..d0d637f 100644 --- a/docs/guide/customize-style.md +++ b/docs/guide/customize-style.md @@ -1,10 +1,12 @@ --- -title: 定制样式 +title: 定制图表样式 nav: { title: '指南', order: 0 } toc: content order: 3 --- +# 定制图表样式 + 通过在 [ConfigProvider](/components/config-provider) 中传入样式属性，来配置图表组件的全局样式。 ## 定制组件级样式 diff --git a/docs/guide/demos/WeatherCard/index.tsx b/docs/guide/demos/WeatherCard/index.tsx new file mode 100644 index 0000000..872dbf2 --- /dev/null +++ b/docs/guide/demos/WeatherCard/index.tsx @@ -0,0 +1,45 @@ +import type { CodeBlockComponent } from '@antv/gpt-vis'; +import React from 'react'; +import StyledComponent from './style'; + +const WeatherCard: CodeBlockComponent = (props) => { + const content = String(props.children).trim(); + const { locationName, temperature, humidity, wind, cloudiness, uv } = JSON.parse(content); + + return ( + +
+
+
+ + {temperature}° +
+ {locationName} +
+
+
+ Humidity + {humidity}% +
+
+ Wind + {wind}kph +
+
+ Cloudiness + {cloudiness}% +
+
+ UV Index + {uv} +
+
+
+ + ); +}; + +export default WeatherCard; diff --git a/docs/guide/demos/WeatherCard/style.ts b/docs/guide/demos/WeatherCard/style.ts new file mode 100644 index 0000000..f5312ce --- /dev/null +++ b/docs/guide/demos/WeatherCard/style.ts @@ -0,0 +1,116 @@ +import { styled } from 'styled-components'; + +const StyledComponent = styled.div` + width: 560px; + background-color: #60a5fa; + border-radius: 10px; + + .locationSection { + display: flex; + flex-direction: column; + padding: 18px 25px; + } + + .temperatureWrapper { + display: flex; + align-items: center; + justify-content: space-between; + } + + .temperatureDetails { + display: flex; + align-items: center; + gap: 40px; + } + + .imageIcon { + flex-shrink: 0; + width: 36px; + height: 36px; + border-radius: 10px; + } + + .currentTemperature { + color: #feffff; + font-size: 25px; + font-weight: bold; + } + + .locationName { + color: #feffff; + font-size: 24px; + font-weight: bold; + } + + .weatherDetails { + display: flex; + align-items: center; + margin-top: 16px; + justify-content: space-between; + font-size: 14px; + } + + .humiditySection { + display: flex; + flex-direction: column; + align-items: flex-start; + min-width: 82px; + } + + .attributeLabel { + min-width: 56px; + margin-right: 2px; + margin-left: 2px; + color: #dbeafe; + } + + .uvIndexValue { + color: #fff; + font-size: 12px; + } + + .windSection { + display: flex; + flex-direction: column; + align-items: flex-start; + margin-left: 20px; + } + + .windSpeedLabel { + color: #dbeafe; + } + + .windSpeedValue { + color: #feffff; + } + + .cloudinessSection { + display: flex; + flex-direction: column; + } + + .cloudinessLabel { + color: #dbeafe; + } + + .cloudinessValue { + align-self: flex-start; + color: #fff; + } + + .uvIndexSection { + display: flex; + flex-direction: column; + } + + .uvIndexLabel { + margin-left: 2px; + color: #dbeafe; + } + + .uvIndexValue { + color: #fff; + } +`; + +export default StyledComponent; diff --git a/docs/guide/demos/custom-ui.tsx b/docs/guide/demos/custom-ui.tsx new file mode 100644 index 0000000..4a61277 --- /dev/null +++ b/docs/guide/demos/custom-ui.tsx @@ -0,0 +1,48 @@ +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": "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: WeatherCard, +}; +const components = { + code: withChartCode({ + // register custom block renderer + languageRenderers: customRenderers, + }), +}; + +const bgStyle = { + display: 'grid', + gridGap: '20px 0', + padding: 20, + borderRadius: 8, +}; + +export default () => { + return ( +
+ + {markdownContent}} /> +
+ ); +}; diff --git a/mako.config.json b/mako.config.json index bf1f748..b8b84e1 100644 --- a/mako.config.json +++ b/mako.config.json @@ -5,5 +5,8 @@ }, "codeSplitting": { "strategy": "auto" + }, + "watch": { + "ignorePaths": ["bindings"] } } 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/hooks/useConfig.ts b/src/ConfigProvider/hooks/useConfig.ts index 157bc59..370be9d 100644 --- a/src/ConfigProvider/hooks/useConfig.ts +++ b/src/ConfigProvider/hooks/useConfig.ts @@ -85,7 +85,7 @@ function useGraphGlobalConfig(name: Charts) { return mergeGraphOptions(graphConfig, componentConfig || {}); } -export function useGraphConfig( +export function useGraphConfig>( name: Charts, defaultConfig: Partial, props: Partial, 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 词云图 diff --git a/tsconfig.json b/tsconfig.json index 0916abb..027799f 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -14,6 +14,6 @@ "@antv/gpt-vis": ["./src/index.ts"] } }, - "include": ["./*.?*.ts", "src", "__tests__"], + "include": ["./*.?*.ts", "src", "__tests__", "docs"], "exclude": ["node_modules", "dist"] }