From a54e568e2f5deedba2e9da0089fe1956c701b022 Mon Sep 17 00:00:00 2001 From: yunji Date: Fri, 6 Dec 2024 21:14:11 +0800 Subject: [PATCH 1/4] wip: docs for custom ui --- docs/guide/customize-style.md | 2 +- docs/guide/demos/WeatherCard/index.tsx | 47 +++++++++ docs/guide/demos/WeatherCard/style.ts | 139 +++++++++++++++++++++++++ docs/guide/demos/custom-ui.tsx | 44 ++++++++ docs/guide/quick-start.md | 2 + mako.config.json | 3 + tsconfig.json | 2 +- 7 files changed, 237 insertions(+), 2 deletions(-) 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/docs/guide/customize-style.md b/docs/guide/customize-style.md index 754f27a..c00d354 100644 --- a/docs/guide/customize-style.md +++ b/docs/guide/customize-style.md @@ -1,5 +1,5 @@ --- -title: 定制样式 +title: 定制图表样式 nav: { title: '指南', order: 0 } toc: content order: 3 diff --git a/docs/guide/demos/WeatherCard/index.tsx b/docs/guide/demos/WeatherCard/index.tsx new file mode 100644 index 0000000..4b9aaa1 --- /dev/null +++ b/docs/guide/demos/WeatherCard/index.tsx @@ -0,0 +1,47 @@ +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..c3d2cda --- /dev/null +++ b/docs/guide/demos/WeatherCard/style.ts @@ -0,0 +1,139 @@ +import { styled } from 'styled-components'; + +const StyledComponent = styled.div` + width: 424px; + padding: 2px; + background-color: #60a5fa; + + .locationSection { + display: flex; + flex-direction: column; + padding: 18px 18px 14px 10px; + border-radius: 10px; + } + + .temperatureWrapper { + display: flex; + align-items: center; + justify-content: space-between; + margin-left: 12px; + } + + .temperatureDetails { + display: flex; + align-items: center; + gap: 22px; + } + + .imageIcon { + flex-shrink: 0; + width: 36px; + height: 36px; + border-radius: 10px; + } + + .currentTemperature { + color: #feffff; + font-size: 28px; + font-weight: bold; + } + + .locationName { + color: #60a5fa; + font-size: 14px; + font-weight: bold; + } + + .weatherDetails { + display: flex; + align-items: center; + margin-top: 16px; + padding-right: 2px; + padding-left: 2px; + } + + .humiditySection { + display: flex; + 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 { + color: #fff; + font-size: 12px; + } + + .windSection { + display: flex; + 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; + } +`; + +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..79071ab --- /dev/null +++ b/docs/guide/demos/custom-ui.tsx @@ -0,0 +1,44 @@ +import { ChartType, GPTVisLite, Pie, withChartCode } from '@antv/gpt-vis'; +import React from 'react'; +import WeatherCard from './WeatherCard'; + +const markdownContent = ` +\`\`\`weather +{ + "locationName": "Hngzhou", + "temperature": 11.4, + "humidity": 82, + "wind": 6.8, + "cloudiness": 75, + "uv": "0.2 of 11" +} +\`\`\` + +\`\`\`vis-chart +{ + "type": "pie", + "data": [ + { "category": "分类一", "value": 27 }, + { "category": "分类二", "value": 25 }, + { "category": "分类三", "value": 18 }, + { "category": "其他", "value": 5 } + ] +} +\`\`\` +`; + +const customRenderers = { + weather: WeatherCard, +}; +const components = { + code: withChartCode({ + // register custom block renderer + languageRenderers: customRenderers, + // register a pie chart + components: { [ChartType.Pie]: Pie }, + }), +}; + +export default () => { + return {markdownContent}; +}; diff --git a/docs/guide/quick-start.md b/docs/guide/quick-start.md index f2be67f..f68b6ff 100644 --- a/docs/guide/quick-start.md +++ b/docs/guide/quick-start.md @@ -87,3 +87,5 @@ 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/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"] } From a10ea8b2bf039a0d643a0326e02790592b8468b7 Mon Sep 17 00:00:00 2001 From: yunji Date: Fri, 13 Dec 2024 18:01:39 +0800 Subject: [PATCH 2/4] 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 词云图 From b9a11a108d5c597d80f904d0c5d54a22b199ec52 Mon Sep 17 00:00:00 2001 From: yunji Date: Fri, 13 Dec 2024 18:28:53 +0800 Subject: [PATCH 3/4] chore: type --- src/FishboneDiagram/index.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/FishboneDiagram/index.tsx b/src/FishboneDiagram/index.tsx index c83509b..a5aaf3e 100644 --- a/src/FishboneDiagram/index.tsx +++ b/src/FishboneDiagram/index.tsx @@ -1,4 +1,4 @@ -import type { FishboneOptions } from '@ant-design/graphs'; +import type { GraphOptions } from '@ant-design/graphs'; import { Fishbone as ADCFishbone } from '@ant-design/graphs'; import React, { useMemo } from 'react'; import { useGraphConfig } from '../ConfigProvider/hooks'; @@ -7,7 +7,7 @@ import { visTreeData2GraphData } from '../utils/graph'; export interface FishboneDiagramProps extends TreeGraphProps {} -const defaultConfig: FishboneOptions = { +const defaultConfig: GraphOptions = { autoFit: 'view', autoResize: true, }; @@ -17,7 +17,7 @@ const FishboneDiagram: React.FC = (props) => { const data = useMemo(() => visTreeData2GraphData(propsData), [propsData]); - const config = useGraphConfig('FishboneDiagram', defaultConfig, restProps); + const config = useGraphConfig('FishboneDiagram', defaultConfig, restProps); return ; }; From 367d80573949a6eeef631cf78932a405f7be4850 Mon Sep 17 00:00:00 2001 From: yunji Date: Fri, 13 Dec 2024 18:39:59 +0800 Subject: [PATCH 4/4] chore: useGraphConfig type --- src/ConfigProvider/hooks/useConfig.ts | 2 +- src/FishboneDiagram/index.tsx | 6 +++--- 2 files changed, 4 insertions(+), 4 deletions(-) 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/FishboneDiagram/index.tsx b/src/FishboneDiagram/index.tsx index a5aaf3e..c83509b 100644 --- a/src/FishboneDiagram/index.tsx +++ b/src/FishboneDiagram/index.tsx @@ -1,4 +1,4 @@ -import type { GraphOptions } from '@ant-design/graphs'; +import type { FishboneOptions } from '@ant-design/graphs'; import { Fishbone as ADCFishbone } from '@ant-design/graphs'; import React, { useMemo } from 'react'; import { useGraphConfig } from '../ConfigProvider/hooks'; @@ -7,7 +7,7 @@ import { visTreeData2GraphData } from '../utils/graph'; export interface FishboneDiagramProps extends TreeGraphProps {} -const defaultConfig: GraphOptions = { +const defaultConfig: FishboneOptions = { autoFit: 'view', autoResize: true, }; @@ -17,7 +17,7 @@ const FishboneDiagram: React.FC = (props) => { const data = useMemo(() => visTreeData2GraphData(propsData), [propsData]); - const config = useGraphConfig('FishboneDiagram', defaultConfig, restProps); + const config = useGraphConfig('FishboneDiagram', defaultConfig, restProps); return ; };