-
Notifications
You must be signed in to change notification settings - Fork 20
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: fishbone diagram component (#18)
* feat: fishbone diagram * chore: changeset * ci: format
- Loading branch information
Showing
13 changed files
with
317 additions
and
63 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,5 @@ | ||
| --- | ||
| '@antv/gpt-vis': patch | ||
| --- | ||
|
|
||
| feat: add fishbone diagram component |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,64 @@ | ||
| import { FishboneDiagram } from '@antv/gpt-vis'; | ||
| import React from 'react'; | ||
|
|
||
| const data = { | ||
| name: '产品盈利未达到预期目标', | ||
| children: [ | ||
| { | ||
| name: '问题描述与分析', | ||
| children: [ | ||
| { name: '品牌销量分析' }, | ||
| { name: '市场容量评估' }, | ||
| { name: '品牌的市场份额分析' }, | ||
| { name: '总贡献毛利计算' }, | ||
| ], | ||
| }, | ||
| { | ||
| name: '品牌定位策略', | ||
| children: [ | ||
| { name: '外包装设计' }, | ||
| { name: '品牌名称选择' }, | ||
| { name: '销售价格定位' }, | ||
| { name: '产品规格定义' }, | ||
| ], | ||
| }, | ||
| { | ||
| name: '分销渠道管理', | ||
| children: [ | ||
| { name: '地区分布' }, | ||
| { name: '渠道选择' }, | ||
| { name: '客户类型分类' }, | ||
| { name: '销售人员覆盖范围' }, | ||
| ], | ||
| }, | ||
| { | ||
| name: '市场知名度提升', | ||
| children: [ | ||
| { name: '地区权重分析' }, | ||
| { name: '媒体组合策略' }, | ||
| { name: '广告投入预算' }, | ||
| { name: '品质意识提升' }, | ||
| ], | ||
| }, | ||
| { | ||
| name: '试购买策略', | ||
| children: [ | ||
| { name: '现场展示效果' }, | ||
| { name: '促销形式设计' }, | ||
| { name: '促销时机选择' }, | ||
| { name: '供货保证措施' }, | ||
| ], | ||
| }, | ||
| { | ||
| name: '重复购买策略', | ||
| children: [ | ||
| { name: '消费者档案管理' }, | ||
| { name: '使用场合分析' }, | ||
| { name: '使用次数统计' }, | ||
| { name: '产品原因退货处理' }, | ||
| ], | ||
| }, | ||
| ], | ||
| }; | ||
|
|
||
| export default () => <FishboneDiagram data={data} />; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,68 @@ | ||
| import { Bubble, type BubbleProps } from '@ant-design/x'; | ||
| import { ChartType, FishboneDiagram, GPTVisLite, withChartCode } from '@antv/gpt-vis'; | ||
| import React from 'react'; | ||
|
|
||
| const markdownContent = ` | ||
| 当然了，以下是为你绘制的一个鱼骨图 | ||
| \`\`\`vis-chart | ||
| { | ||
| "type": "fishbone-diagram", | ||
| "data": { | ||
| "name": "生产效率低", | ||
| "children": [ | ||
| { | ||
| "name": "设备问题", | ||
| "children": [{ "name": "设备老化" }, { "name": "维护不及时" }] | ||
| }, | ||
| { | ||
| "name": "员工问题", | ||
| "children": [{ "name": "技能不足" }, { "name": "工作态度差" }] | ||
| }, | ||
| { | ||
| "name": "流程问题", | ||
| "children": [{ "name": "流程繁琐" }, { "name": "缺乏标准化" }] | ||
| } | ||
| ] | ||
| } | ||
| } | ||
| \`\`\` | ||
| `; | ||
|
|
||
| const bgStyle = { | ||
| display: 'grid', | ||
| gridGap: '20px 0', | ||
| background: '#f7f7f7', | ||
| padding: 20, | ||
| borderRadius: 8, | ||
| }; | ||
|
|
||
| const CodeComponent = withChartCode({ | ||
| components: { [ChartType.FishboneDiagram]: FishboneDiagram }, | ||
| }); | ||
|
|
||
| const RenderMarkdown: BubbleProps['messageRender'] = (content) => ( | ||
| <GPTVisLite components={{ code: CodeComponent }}>{content}</GPTVisLite> | ||
| ); | ||
|
|
||
| export default () => ( | ||
| <div style={bgStyle}> | ||
| <Bubble | ||
| placement="end" | ||
| content='用鱼骨图来可视化一下我的数据 {"problem":"生产效率低","bones":[{"category":"设备问题","factors":["设备老化","维护不及时"]},{"category":"员工问题","factors":["技能不足","工作态度差"]},{"category":"流程问题","factors":["流程繁琐","缺乏标准化"]}]}' | ||
| avatar={{ | ||
| src: 'https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*2Q5LRJ3LFPUAAAAAAAAAAAAADmJ7AQ/fmt.webp', | ||
| }} | ||
| styles={{ content: { background: '#ebebeb' } }} | ||
| /> | ||
| <Bubble | ||
| content={markdownContent} | ||
| messageRender={RenderMarkdown} | ||
| avatar={{ | ||
| src: 'https://mdn.alipayobjects.com/huamei_je4oko/afts/img/A*6LRBT7rjOkQAAAAAAAAAAAAADsZ-AQ/original', | ||
| }} | ||
| variant="shadow" | ||
| styles={{ content: { background: '#fff' } }} | ||
| /> | ||
| </div> | ||
| ); |
Oops, something went wrong.