feffery-infographic 0.1.0__py3-none-any.whl
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- feffery_infographic/Infographic.py +186 -0
- feffery_infographic/__init__.py +86 -0
- feffery_infographic/_imports_.py +3 -0
- feffery_infographic/feffery_infographic.min.js +3 -0
- feffery_infographic/feffery_infographic.min.js.LICENSE.txt +1 -0
- feffery_infographic/feffery_infographic.min.js.map +1 -0
- feffery_infographic/metadata.json +1 -0
- feffery_infographic/package-info.json +67 -0
- feffery_infographic/prompts.py +145 -0
- feffery_infographic-0.1.0.dist-info/METADATA +173 -0
- feffery_infographic-0.1.0.dist-info/RECORD +14 -0
- feffery_infographic-0.1.0.dist-info/WHEEL +5 -0
- feffery_infographic-0.1.0.dist-info/licenses/LICENSE +21 -0
- feffery_infographic-0.1.0.dist-info/top_level.txt +1 -0
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"src/lib/components/Infographic.react.js":{"description":"\u4fe1\u606f\u56fe\u6e32\u67d3\u7ec4\u4ef6\n(Infographic render component)","displayName":"Infographic","methods":[],"props":{"id":{"type":{"name":"string"},"required":false,"description":"\u7ec4\u4ef6\u552f\u4e00id\n(The unique id of this component)"},"key":{"type":{"name":"string"},"required":false,"description":"\u5bf9\u5f53\u524d\u7ec4\u4ef6\u7684`key`\u503c\u8fdb\u884c\u66f4\u65b0\uff0c\u53ef\u5b9e\u73b0\u5f3a\u5236\u91cd\u7ed8\u5f53\u524d\u7ec4\u4ef6\u7684\u6548\u679c\n\uff08Force update the `key` value of the current component, which can force a redraw of the current component\uff09"},"style":{"type":{"name":"object"},"required":false,"description":"\u5f53\u524d\u7ec4\u4ef6css\u6837\u5f0f\u5b57\u5178\uff0c\u952e\u540d\u8bf7\u4f7f\u7528\u5c0f\u9a7c\u5cf0\u547d\u540d\u6cd5\n(The style dictionary of the current component, the key name please use camelCase naming)"},"className":{"type":{"name":"string"},"required":false,"description":"\u5f53\u524d\u7ec4\u4ef6css\u7c7b\n(The css class of the current component)"},"syntax":{"type":{"name":"string"},"required":true,"description":"\u5fc5\u586b\uff0c\u4fe1\u606f\u56fe\u8bed\u6cd5\n(Required, infographic syntax)"},"width":{"type":{"name":"union","value":[{"name":"number"},{"name":"string"}]},"required":false,"description":"\u4fe1\u606f\u56fe\u5bbd\u5ea6\uff0c\u652f\u6301\u6570\u503c\u578b\u548c\u5b57\u7b26\u578b\u8f93\u5165\n(Infographic width, support numeric and character input)"},"height":{"type":{"name":"union","value":[{"name":"number"},{"name":"string"}]},"required":false,"description":"\u4fe1\u606f\u56fe\u9ad8\u5ea6\uff0c\u652f\u6301\u6570\u503c\u578b\u548c\u5b57\u7b26\u578b\u8f93\u5165\n(Infographic height, support numeric and character input)"},"padding":{"type":{"name":"union","value":[{"name":"number"},{"name":"arrayOf","value":{"name":"number"}}]},"required":false,"description":"\u4fe1\u606f\u56fe\u50cf\u7d20\u5185\u8fb9\u8ddd\uff0c\u652f\u6301\u6570\u503c\u578b\uff0c\u6216\u683c\u5f0f\u5982`[\u4e0a, \u53f3, \u4e0b, \u5de6]`\u5404\u81ea\u65b9\u5411\u4e0a\u50cf\u7d20\u5185\u8fb9\u8ddd\u7684\u6570\u7ec4\n(Infographic pixel margin, support numeric, or format like `[top, right, bottom, left]` array of each direction pixel margin)"},"editable":{"type":{"name":"bool"},"required":false,"description":"\u662f\u5426\u5f00\u542f\u53ef\u7f16\u8f91\u6a21\u5f0f\n(Whether to enable editable mode)\n\u9ed8\u8ba4\u503c\uff1a`false`\n(Default: `false`)"},"exportTrigger":{"type":{"name":"shape","value":{"type":{"name":"enum","value":[{"value":"'png'","computed":false},{"value":"'svg'","computed":false}],"description":"\u56fe\u7247\u5bfc\u51fa\u7c7b\u578b\uff0c\u53ef\u9009\u9879\u6709`'png'`\u3001`'svg'`\n(Image export type, optional items include `'png'` and `'svg'`)\n\u9ed8\u8ba4\u503c\uff1a`'png'`\n(Default: `'png'`)","required":false},"dpr":{"name":"number","description":"\u5f53\u5bfc\u51fa`'png'`\u7c7b\u578b\u56fe\u7247\u65f6\uff0c\u7528\u4e8e\u8bbe\u7f6e\u5bfc\u51fa\u56fe\u7247\u7684\u50cf\u7d20\u6bd4\n(When exporting the `'png'` type image, set the export image pixel ratio)\n\u9ed8\u8ba4\u503c\uff1a`1`\n(Default: `1`)","required":false},"download":{"name":"bool","description":"\u662f\u5426\u89e6\u53d1\u4e0b\u8f7d\u64cd\u4f5c\n(Whether to trigger the download operation)\n\u9ed8\u8ba4\u503c\uff1a`true`\n(Default: `true`)","required":false},"fileName":{"name":"string","description":"\u5f53\u89e6\u53d1\u4e0b\u8f7d\u64cd\u4f5c\u65f6\uff0c\u63a7\u5236\u4e0b\u8f7d\u6587\u4ef6\u7684\u6587\u4ef6\u540d\n(When triggering the download operation, control the download file name)\n\u9ed8\u8ba4\u503c\uff1a`'infographic_export'`\n(Default: `'infographic_export'`)","required":false}}},"required":false,"description":"\u6bcf\u6b21\u6709\u6548\u66f4\u65b0\u90fd\u4f1a\u89e6\u53d1\u9488\u5bf9\u5f53\u524d\u4fe1\u606f\u56fe\u7684\u56fe\u7247\u5bfc\u51fa\u3001\u4e0b\u8f7d\u64cd\u4f5c\uff0c\u6bcf\u6b21\u6267\u884c\u540e\u90fd\u4f1a\u88ab\u91cd\u7f6e\u4e3a\u7a7a\u503c\n(Each time a valid update is triggered, a picture export and download operation will be triggered for the current infographic, and each time it will be reset to an empty value)"},"exportEvent":{"type":{"name":"shape","value":{"timestamp":{"name":"number","description":"\u4e8b\u4ef6\u65f6\u95f4\u6233","required":false},"type":{"name":"enum","value":[{"value":"'png'","computed":false},{"value":"'svg'","computed":false}],"description":"\u56fe\u7247\u7c7b\u578b\uff0c\u53ef\u80fd\u503c\u6709`'png'`\u3001`'svg'`","required":false},"data":{"name":"string","description":"\u56fe\u7247\u5bf9\u5e94`dataURL`\u6570\u636e","required":false}}},"required":false,"description":"\u8bb0\u5f55\u6700\u8fd1\u4e00\u6b21\u901a\u8fc7\u53c2\u6570`exportTrigger`\u6709\u6548\u89e6\u53d1\u7684\u56fe\u7247\u5bfc\u51fa\u64cd\u4f5c\u4e8b\u4ef6\u4fe1\u606f\n(Record the latest event information of the image export operation triggered by the parameter `exportTrigger`)"},"debugWindowInstanceName":{"type":{"name":"string"},"required":false,"description":"\u8c03\u8bd5\u7528\u53c2\u6570\uff0c\u6709\u6548\u8bbe\u7f6e\u540e\u4f1a\u5c06\u5f53\u524d\u4fe1\u606f\u56fe\u5b9e\u4f8b\u6302\u8f7d\u5230`window`\u5bf9\u8c61\u4e0b\u5bf9\u5e94\u7684\u53d8\u91cf\u540d\u4e0a\n(Debugging parameters, valid setting will mount the current infographic instance to the `window` object under the corresponding variable name)"},"setProps":{"type":{"name":"func"},"required":false,"description":"Dash-assigned callback that should be called to report property changes\nto Dash, to make them available for callbacks."}}}}
|
|
@@ -0,0 +1,67 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "feffery_infographic",
|
|
3
|
+
"version": "0.1.0",
|
|
4
|
+
"description": "Plotly Dash components based on AntV Infographic",
|
|
5
|
+
"repository": {
|
|
6
|
+
"type": "git",
|
|
7
|
+
"url": "https://github.com/HogaStack/feffery-infographic.git"
|
|
8
|
+
},
|
|
9
|
+
"bugs": {
|
|
10
|
+
"url": "https://github.com/HogaStack/feffery-infographic/issues"
|
|
11
|
+
},
|
|
12
|
+
"homepage": "https://github.com/HogaStack/feffery-infographic",
|
|
13
|
+
"main": "build/index.js",
|
|
14
|
+
"scripts": {
|
|
15
|
+
"start": "webpack serve --config ./webpack.serve.config.js --open",
|
|
16
|
+
"validate-init": "python _validate_init.py",
|
|
17
|
+
"prepublishOnly": "npm run validate-init",
|
|
18
|
+
"build:js": "webpack --mode production",
|
|
19
|
+
"build:backends": "dash-generate-components ./src/lib/components feffery_infographic --keep-prop-order ALL -p package-info.json --r-prefix '' --jl-prefix '' --ignore \\.test\\.",
|
|
20
|
+
"build:backends-activated": "(. venv/bin/activate || venv\\scripts\\activate && npm run build:backends)",
|
|
21
|
+
"build": "npm run prettier && npm run eslint && npm run build:js && npm run build:backends && npm run ruff:check && npm run ruff:format",
|
|
22
|
+
"build:activated": "npm run build:js && npm run build:backends-activated",
|
|
23
|
+
"prettier": "prettier --write src/**/*.js src/**/*.react.js",
|
|
24
|
+
"eslint": "eslint --fix src/**/*.js src/**/*.react.js",
|
|
25
|
+
"ruff:check": "python -m ruff check . --fix --exclude=node_modules,venv,build",
|
|
26
|
+
"ruff:format": "python -m ruff format . --exclude=node_modules,venv,build",
|
|
27
|
+
"format": "npm run prettier && npm run ruff:format",
|
|
28
|
+
"lint": "npm run eslint && npm run ruff:check"
|
|
29
|
+
},
|
|
30
|
+
"author": "CNFeffery <fefferypzy@gmail.com>",
|
|
31
|
+
"email": "fefferypzy@gmail.com",
|
|
32
|
+
"license": "MIT",
|
|
33
|
+
"dependencies": {
|
|
34
|
+
"@antv/infographic": "^0.2.7",
|
|
35
|
+
"ramda": "^0.26.1"
|
|
36
|
+
},
|
|
37
|
+
"devDependencies": {
|
|
38
|
+
"@babel/core": "^7.22.1",
|
|
39
|
+
"@babel/plugin-proposal-object-rest-spread": "^7.20.7",
|
|
40
|
+
"@babel/preset-env": "^7.22.2",
|
|
41
|
+
"@babel/preset-react": "^7.22.3",
|
|
42
|
+
"@plotly/dash-component-plugins": "^1.2.3",
|
|
43
|
+
"@plotly/webpack-dash-dynamic-import": "^1.2.0",
|
|
44
|
+
"babel-eslint": "^10.1.0",
|
|
45
|
+
"babel-loader": "^9.1.2",
|
|
46
|
+
"copyfiles": "^2.1.1",
|
|
47
|
+
"css-loader": "^6.8.1",
|
|
48
|
+
"eslint": "^6.0.1",
|
|
49
|
+
"eslint-config-prettier": "^6.0.0",
|
|
50
|
+
"eslint-plugin-import": "^2.18.0",
|
|
51
|
+
"eslint-plugin-react": "^7.14.2",
|
|
52
|
+
"prettier": "^3.7.4",
|
|
53
|
+
"prop-types": "^15.8.1",
|
|
54
|
+
"react": "^16.8.6",
|
|
55
|
+
"react-docgen": "^5.4.3",
|
|
56
|
+
"react-dom": "^16.8.6",
|
|
57
|
+
"style-loader": "^3.3.3",
|
|
58
|
+
"styled-jsx": "^3.2.1",
|
|
59
|
+
"webpack": "^5.84.1",
|
|
60
|
+
"webpack-cli": "^5.1.1",
|
|
61
|
+
"webpack-dev-server": "^4.15.0"
|
|
62
|
+
},
|
|
63
|
+
"engines": {
|
|
64
|
+
"node": ">=8.11.0",
|
|
65
|
+
"npm": ">=6.1.0"
|
|
66
|
+
}
|
|
67
|
+
}
|
|
@@ -0,0 +1,145 @@
|
|
|
1
|
+
__all__ = [
|
|
2
|
+
'base_prompt',
|
|
3
|
+
]
|
|
4
|
+
|
|
5
|
+
base_prompt = """
|
|
6
|
+
## 角色说明
|
|
7
|
+
|
|
8
|
+
你是一个专业的信息图生成助手,精通 AntV Infographic 的核心概念,熟悉 AntV Infographic Syntax 语法。
|
|
9
|
+
|
|
10
|
+
---
|
|
11
|
+
|
|
12
|
+
## 任务目标
|
|
13
|
+
|
|
14
|
+
请根据用户提供的文字内容,结合 AntV Infographic Syntax 规范,输出符合文字信息结构内容的信息图以及对应的 AntV Infographic 的语法。你需要:
|
|
15
|
+
|
|
16
|
+
1. 提炼关键信息结构(标题、描述、条目等)
|
|
17
|
+
2. 结合语义选择合适的模板(template)与主题
|
|
18
|
+
3. 将内容用规范的 AntV Infographic Syntax 描述,方便实时流式渲染
|
|
19
|
+
|
|
20
|
+
---
|
|
21
|
+
|
|
22
|
+
## 输出格式
|
|
23
|
+
|
|
24
|
+
始终使用 AntV Infographic Syntax 纯语法文本,外层包裹 ```plain 代码块,不得输出解释性文字。语法结构示例:
|
|
25
|
+
|
|
26
|
+
```plain
|
|
27
|
+
infographic list-row-horizontal-icon-arrow
|
|
28
|
+
data
|
|
29
|
+
title 标题
|
|
30
|
+
desc 描述
|
|
31
|
+
items
|
|
32
|
+
- label 条目
|
|
33
|
+
value 12.5
|
|
34
|
+
desc 说明
|
|
35
|
+
icon mdi/rocket-launch
|
|
36
|
+
theme
|
|
37
|
+
palette #3b82f6 #8b5cf6 #f97316
|
|
38
|
+
```
|
|
39
|
+
|
|
40
|
+
---
|
|
41
|
+
|
|
42
|
+
## AntV Infographic Syntax 语法
|
|
43
|
+
|
|
44
|
+
AntV Infographic Syntax 是一个用于描述信息图渲染配置的语法,通过缩进层级描述信息,具有很强的鲁棒性,便于 AI 流式输出的时候渲染信息图。主要包含有几部分信息:
|
|
45
|
+
|
|
46
|
+
1. 模版 template:不同的模版用于表达不同的文本信息结构
|
|
47
|
+
2. 数据 data:是信息图的数据,包含有标题 title、描述 desc、数据项 items 等字段,其中 items 字段包含多个条目:标签 label、值 value、描述信息 desc、图标 icon、子元素 children 等字段
|
|
48
|
+
3. 主题 theme:主题包含有色板 palette、字体 font 等字段
|
|
49
|
+
|
|
50
|
+
|
|
51
|
+
### 语法要点
|
|
52
|
+
|
|
53
|
+
- 第一行以 `infographic <template-name>` 开头,模板从下方列表中选择
|
|
54
|
+
- 使用 block 描述 data / theme,层级通过两个空格缩进
|
|
55
|
+
- 键值对使用「键 值」形式,数组通过 `-` 分项
|
|
56
|
+
- icon 值直接提供关键词或图标名(如 `mdi/chart-line`)
|
|
57
|
+
- data 应包含 title/desc/items(根据语义可省略不必要字段)
|
|
58
|
+
- data.items 可包含 label(string)/value(number)/desc(string)/icon(string)/children(object) 等字段,children 表示层级结构
|
|
59
|
+
- 对比类模板(名称以 `compare-` 开头)应构建两个根节点,所有对比项作为这两个根节点的 children,确保结构清晰
|
|
60
|
+
- 可以添加 theme 来切换色板或深浅色;
|
|
61
|
+
- 严禁输出 JSON、Markdown、解释或额外文本
|
|
62
|
+
|
|
63
|
+
### 模板列表 template
|
|
64
|
+
|
|
65
|
+
- sequence-zigzag-steps-underline-text
|
|
66
|
+
- sequence-horizontal-zigzag-underline-text
|
|
67
|
+
- sequence-circular-simple
|
|
68
|
+
- sequence-filter-mesh-simple
|
|
69
|
+
- sequence-mountain-underline-text
|
|
70
|
+
- sequence-cylinders-3d-simple
|
|
71
|
+
- compare-binary-horizontal-simple-fold
|
|
72
|
+
- compare-hierarchy-left-right-circle-node-pill-badge
|
|
73
|
+
- quadrant-quarter-simple-card
|
|
74
|
+
- quadrant-quarter-circular
|
|
75
|
+
- list-grid-badge-card
|
|
76
|
+
- list-grid-candy-card-lite
|
|
77
|
+
- list-grid-ribbon-card
|
|
78
|
+
- list-row-horizontal-icon-arrow
|
|
79
|
+
- relation-circle-icon-badge
|
|
80
|
+
- sequence-ascending-steps
|
|
81
|
+
- compare-swot
|
|
82
|
+
- sequence-color-snake-steps-horizontal-icon-line
|
|
83
|
+
- sequence-pyramid-simple
|
|
84
|
+
- list-sector-plain-text
|
|
85
|
+
- sequence-roadmap-vertical-simple
|
|
86
|
+
- sequence-zigzag-pucks-3d-simple
|
|
87
|
+
- sequence-ascending-stairs-3d-underline-text
|
|
88
|
+
- compare-binary-horizontal-badge-card-arrow
|
|
89
|
+
- compare-binary-horizontal-underline-text-vs
|
|
90
|
+
- hierarchy-tree-tech-style-capsule-item
|
|
91
|
+
- hierarchy-tree-curved-line-rounded-rect-node
|
|
92
|
+
- hierarchy-tree-tech-style-badge-card
|
|
93
|
+
- chart-column-simple
|
|
94
|
+
- chart-bar-plain-text
|
|
95
|
+
- chart-line-plain-text
|
|
96
|
+
- chart-pie-plain-text
|
|
97
|
+
- chart-pie-compact-card
|
|
98
|
+
- chart-pie-donut-plain-text
|
|
99
|
+
- chart-pie-donut-pill-badge
|
|
100
|
+
|
|
101
|
+
### 示例
|
|
102
|
+
|
|
103
|
+
- 绘制一个 互联网技术演进史 的信息图
|
|
104
|
+
|
|
105
|
+
```plain
|
|
106
|
+
infographic list-row-horizontal-icon-arrow
|
|
107
|
+
data
|
|
108
|
+
title 互联网技术演进史
|
|
109
|
+
desc 从Web 1.0到AI时代的关键里程碑
|
|
110
|
+
items
|
|
111
|
+
- time 1991
|
|
112
|
+
label 万维网诞生
|
|
113
|
+
desc Tim Berners-Lee发布首个网站,开启互联网时代
|
|
114
|
+
icon mdi/web
|
|
115
|
+
- time 2004
|
|
116
|
+
label Web 2.0兴起
|
|
117
|
+
desc 社交媒体和用户生成内容成为主流
|
|
118
|
+
icon mdi/account-multiple
|
|
119
|
+
- time 2007
|
|
120
|
+
label 移动互联网
|
|
121
|
+
desc iPhone发布,智能手机改变世界
|
|
122
|
+
icon mdi/cellphone
|
|
123
|
+
- time 2015
|
|
124
|
+
label 云原生时代
|
|
125
|
+
desc 容器化和微服务架构广泛应用
|
|
126
|
+
icon mdi/cloud
|
|
127
|
+
- time 2020
|
|
128
|
+
label 低代码平台
|
|
129
|
+
desc 可视化开发降低技术门槛
|
|
130
|
+
icon mdi/application-brackets
|
|
131
|
+
- time 2023
|
|
132
|
+
label AI大模型
|
|
133
|
+
desc ChatGPT引爆生成式AI革命
|
|
134
|
+
icon mdi/brain
|
|
135
|
+
```
|
|
136
|
+
|
|
137
|
+
---
|
|
138
|
+
|
|
139
|
+
## 注意事项
|
|
140
|
+
|
|
141
|
+
- 输出必须符合语法规范与缩进规则,方便模型流式输出,这是语法规范中的一部分。
|
|
142
|
+
- 结合用户输入给出结构化 data,勿编造无关内容
|
|
143
|
+
- 如用户指定风格/色彩/语气,可在 theme 中体现
|
|
144
|
+
- 若信息不足,可合理假设补全,但要保持连贯与可信
|
|
145
|
+
"""
|
|
@@ -0,0 +1,173 @@
|
|
|
1
|
+
Metadata-Version: 2.4
|
|
2
|
+
Name: feffery_infographic
|
|
3
|
+
Version: 0.1.0
|
|
4
|
+
Summary: Plotly Dash components based on AntV Infographic
|
|
5
|
+
Home-page: https://github.com/HogaStack/feffery-infographic
|
|
6
|
+
Author: CNFeffery <fefferypzy@gmail.com>
|
|
7
|
+
License: MIT
|
|
8
|
+
Classifier: Framework :: Dash
|
|
9
|
+
Description-Content-Type: text/markdown
|
|
10
|
+
License-File: LICENSE
|
|
11
|
+
Requires-Dist: dash>=3.3.0
|
|
12
|
+
Dynamic: author
|
|
13
|
+
Dynamic: classifier
|
|
14
|
+
Dynamic: description
|
|
15
|
+
Dynamic: description-content-type
|
|
16
|
+
Dynamic: home-page
|
|
17
|
+
Dynamic: license
|
|
18
|
+
Dynamic: license-file
|
|
19
|
+
Dynamic: requires-dist
|
|
20
|
+
Dynamic: summary
|
|
21
|
+
|
|
22
|
+
<p align="center">
|
|
23
|
+
<img src="./imgs/fi-logo.svg" height=300></img>
|
|
24
|
+
</p>
|
|
25
|
+
<h1 align="center">feffery-infographic</h1>
|
|
26
|
+
<div align="center">
|
|
27
|
+
|
|
28
|
+
[](https://github.com/plotly/dash)
|
|
29
|
+
[](https://github.com/HogaStack/feffery-infographic/blob/master/LICENSE)
|
|
30
|
+
[](https://pypi.org/project/feffery-infographic)
|
|
31
|
+
[](https://github.com/astral-sh/ruff)
|
|
32
|
+
|
|
33
|
+
</div>
|
|
34
|
+
|
|
35
|
+
<p align="center">
|
|
36
|
+
<img src="./imgs/readme-overview.webp" width="768" alt="Infographic Preview">
|
|
37
|
+
</p>
|
|
38
|
+
|
|
39
|
+
简体中文 | [English](./README-en_US.md)
|
|
40
|
+
|
|
41
|
+
适用于`Python`全栈应用开发框架[Plotly Dash](https://github.com/plotly/dash)的组件库,基于[AntV Infographic](https://github.com/antvis/infographic),提供丰富的**信息图渲染**功能。
|
|
42
|
+
|
|
43
|
+
## 目录
|
|
44
|
+
|
|
45
|
+
[1 安装](#1-安装)<br>
|
|
46
|
+
[2 API](#2-api)<br>
|
|
47
|
+
[3 基础使用](#3-基础使用)<br>
|
|
48
|
+
[4 信息图语法参考](#4-信息图语法参考)<br>
|
|
49
|
+
[5 全部可用信息图示例](#5-全部可用信息图示例)<br>
|
|
50
|
+
[6 贡献者](#6-贡献者)<br>
|
|
51
|
+
[7 进阶使用](#7-进阶使用)<br>
|
|
52
|
+
[8 更多应用开发教程](#8-更多应用开发教程)<br>
|
|
53
|
+
|
|
54
|
+
<a id="1-安装"></a>
|
|
55
|
+
|
|
56
|
+
## 1 安装
|
|
57
|
+
|
|
58
|
+
```bash
|
|
59
|
+
pip install feffery-infographic -U
|
|
60
|
+
```
|
|
61
|
+
|
|
62
|
+
<a id="2-api"></a>
|
|
63
|
+
|
|
64
|
+
## 2 API
|
|
65
|
+
|
|
66
|
+
### Infographic 信息图渲染组件
|
|
67
|
+
|
|
68
|
+
| 属性名 | 类型 | 默认值 | 说明 |
|
|
69
|
+
| :---------------------- | :------------------- | :----- | :----------------------------------------------------------------------- |
|
|
70
|
+
| id | `string` | - | 组件唯一 ID |
|
|
71
|
+
| key | `string` | - | 更新当前组件的 `key` 值,可用于强制触发组件重绘 |
|
|
72
|
+
| style | `dict` | - | 当前组件的 CSS 样式对象 |
|
|
73
|
+
| className | `string` | - | 当前组件的 CSS 类名 |
|
|
74
|
+
| syntax | `string` | - | **必填**,用于定义信息图内容的语法字符串 |
|
|
75
|
+
| width | `number` \| `string` | - | 信息图容器宽度,支持数值或字符串(如 `'100%'`) |
|
|
76
|
+
| height | `number` \| `string` | - | 信息图容器高度,支持数值或字符串(如 `'500px'`) |
|
|
77
|
+
| padding | `number` \| `list` | - | 信息图容器内边距,支持数值或数组格式(如 `[top, right, bottom, left]`) |
|
|
78
|
+
| exportTrigger | `dict` | - | 触发图片导出或下载操作的配置对象,每次更新都会触发操作并在执行后重置为空 |
|
|
79
|
+
| exportEvent | `dict` | - | 监听最近一次图片导出事件的数据对象 |
|
|
80
|
+
| debugWindowInstanceName | `string` | - | 调试专用,设置后会将当前组件实例挂载到 `window` 对象下的指定变量名 |
|
|
81
|
+
|
|
82
|
+
**`exportTrigger` 配置详解:**
|
|
83
|
+
|
|
84
|
+
- `type`: _string_,导出图片的格式,可选值有 `'png'`、`'svg'`,默认为 `'png'`。
|
|
85
|
+
- `dpr`: _number_,导出 `'png'` 格式图片时的像素比,默认为 `1`。
|
|
86
|
+
- `download`: _boolean_,是否自动触发浏览器下载,默认为 `True`。
|
|
87
|
+
- `fileName`: _string_,下载文件的名称(不含后缀),默认为 `'infographic_export'`。
|
|
88
|
+
|
|
89
|
+
**`exportEvent` 结构详解:**
|
|
90
|
+
|
|
91
|
+
- `timestamp`: _number_,事件触发的时间戳。
|
|
92
|
+
- `type`: _string_,导出的图片格式,可能值为 `'png'` 或 `'svg'`。
|
|
93
|
+
- `data`: _string_,导出的图片 `dataURL` 数据。
|
|
94
|
+
|
|
95
|
+
<a id="3-基础使用"></a>
|
|
96
|
+
|
|
97
|
+
## 3 基础使用
|
|
98
|
+
|
|
99
|
+
```python
|
|
100
|
+
import dash
|
|
101
|
+
from dash import html
|
|
102
|
+
import feffery_infographic as fi
|
|
103
|
+
|
|
104
|
+
app = dash.Dash(__name__)
|
|
105
|
+
|
|
106
|
+
app.layout = html.Div(
|
|
107
|
+
[
|
|
108
|
+
fi.Infographic(
|
|
109
|
+
padding=20,
|
|
110
|
+
height=500,
|
|
111
|
+
# 定义信息图语法
|
|
112
|
+
syntax="""
|
|
113
|
+
infographic list-row-simple-horizontal-arrow
|
|
114
|
+
data
|
|
115
|
+
items
|
|
116
|
+
- label 步骤 1
|
|
117
|
+
desc 开始
|
|
118
|
+
- label 步骤 2
|
|
119
|
+
desc 进行中
|
|
120
|
+
- label 步骤 3
|
|
121
|
+
desc 完成
|
|
122
|
+
"""
|
|
123
|
+
)
|
|
124
|
+
]
|
|
125
|
+
)
|
|
126
|
+
|
|
127
|
+
if __name__ == '__main__':
|
|
128
|
+
app.run(debug=True)
|
|
129
|
+
```
|
|
130
|
+
|
|
131
|
+
<a id="4-信息图语法参考"></a>
|
|
132
|
+
|
|
133
|
+
## 4 信息图语法参考
|
|
134
|
+
|
|
135
|
+
👉 https://infographic.antv.vision/learn/infographic-syntax
|
|
136
|
+
|
|
137
|
+
<a id="5-全部可用信息图示例"></a>
|
|
138
|
+
|
|
139
|
+
## 5 全部可用信息图示例
|
|
140
|
+
|
|
141
|
+
👉 https://infographic.antv.vision/gallery
|
|
142
|
+
|
|
143
|
+
<a id="6-贡献者"></a>
|
|
144
|
+
|
|
145
|
+
## 6 贡献者
|
|
146
|
+
|
|
147
|
+
<a href = "https://github.com/HogaStack/feffery-infographic/graphs/contributors">
|
|
148
|
+
<img src = "https://contrib.rocks/image?repo=CNFeffery/feffery-infographic"/>
|
|
149
|
+
</a>
|
|
150
|
+
|
|
151
|
+
<a id="7-进阶使用"></a>
|
|
152
|
+
|
|
153
|
+
## 7 进阶使用
|
|
154
|
+
|
|
155
|
+
| 场景 | 功能描述 | 源码 |
|
|
156
|
+
| :------: | :-----------------------------------------------: | :----------------------------------------------------------------: |
|
|
157
|
+
| 流式渲染 | 基于最常见的`SSE`接口演示信息图语法的流式更新渲染 | [examples/stream_render_example](./examples/stream_render_example) |
|
|
158
|
+
|
|
159
|
+
<a id="8-更多应用开发教程"></a>
|
|
160
|
+
|
|
161
|
+
## 8 更多应用开发教程
|
|
162
|
+
|
|
163
|
+
> 微信公众号「玩转 Dash」,欢迎扫码关注 👇
|
|
164
|
+
|
|
165
|
+
<p align="center" >
|
|
166
|
+
<img src="./imgs/公众号.png" height=220 />
|
|
167
|
+
</p>
|
|
168
|
+
|
|
169
|
+
> 「玩转 Dash」知识星球,海量教程案例模板资源,专业的答疑咨询服务,欢迎扫码加入 👇
|
|
170
|
+
|
|
171
|
+
<p align="center" >
|
|
172
|
+
<img src="./imgs/知识星球.jpg" height=220 />
|
|
173
|
+
</p>
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
feffery_infographic/Infographic.py,sha256=Vlvrky7EZTfeeKBhZVjjBJnuiLV-8pCHEuf2JopXISI,7069
|
|
2
|
+
feffery_infographic/__init__.py,sha256=oOvqZf4aEcIPAOqhE4JQqh1JA_ox5A4zzsqlYEBm0Ng,2254
|
|
3
|
+
feffery_infographic/_imports_.py,sha256=bpHduFZscgq4FMK30oGPihwTk-OImpQIZGRVSZl9ZZI,67
|
|
4
|
+
feffery_infographic/feffery_infographic.min.js,sha256=zr8-m-jUBOyrcvBP9kJ-yh9U6yenLW46yxs-JKeMWKE,549079
|
|
5
|
+
feffery_infographic/feffery_infographic.min.js.LICENSE.txt,sha256=jJlG38hZor-ybMVBElYxzZbnEQ-iCnAusZJ1ydFliAU,163
|
|
6
|
+
feffery_infographic/feffery_infographic.min.js.map,sha256=gBYFF6Ib7kuF344C5ihfCikE6pt1mU8EPeFb-koBfI0,2300624
|
|
7
|
+
feffery_infographic/metadata.json,sha256=HH3b6abNFQKiVtZJpnqURpe0xg-XWHSKlPlPxOgiP1c,5595
|
|
8
|
+
feffery_infographic/package-info.json,sha256=eyM1jD1jd-EgIMrHmYSi0asbjzcqBB0JETVWVM-_2q8,2647
|
|
9
|
+
feffery_infographic/prompts.py,sha256=nqEhKw4YJL7vNYrFa8mafck7epkI1cn63Fm4vkHyJJ8,5021
|
|
10
|
+
feffery_infographic-0.1.0.dist-info/licenses/LICENSE,sha256=oJHK1NyqGlPXur9LZkuJIDwcdbMeYtNNTSosoOgUM3Q,1064
|
|
11
|
+
feffery_infographic-0.1.0.dist-info/METADATA,sha256=66bt64Bu9JxyoYxplGtS9pmE0rGhkDKwOLR4aGB-ptw,6796
|
|
12
|
+
feffery_infographic-0.1.0.dist-info/WHEEL,sha256=_zCd3N1l69ArxyTb8rzEoP9TpbYXkqRFSNOD5OuxnTs,91
|
|
13
|
+
feffery_infographic-0.1.0.dist-info/top_level.txt,sha256=p164jnJKJy5Be5ZzlUgEKd2N3RAK-i179ELN4Z0BwMQ,20
|
|
14
|
+
feffery_infographic-0.1.0.dist-info/RECORD,,
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
MIT License
|
|
2
|
+
|
|
3
|
+
Copyright (c) 2026 Feffery
|
|
4
|
+
|
|
5
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
6
|
+
of this software and associated documentation files (the "Software"), to deal
|
|
7
|
+
in the Software without restriction, including without limitation the rights
|
|
8
|
+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
9
|
+
copies of the Software, and to permit persons to whom the Software is
|
|
10
|
+
furnished to do so, subject to the following conditions:
|
|
11
|
+
|
|
12
|
+
The above copyright notice and this permission notice shall be included in all
|
|
13
|
+
copies or substantial portions of the Software.
|
|
14
|
+
|
|
15
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
16
|
+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
17
|
+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
18
|
+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
19
|
+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
20
|
+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
21
|
+
SOFTWARE.
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
feffery_infographic
|