@antv/infographic 0.1.4 → 0.2.1

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.
Files changed (38) hide show
  1. package/README.md +54 -40
  2. package/README.zh-CN.md +52 -36
  3. package/dist/infographic.min.js +76 -76
  4. package/dist/infographic.min.js.map +1 -1
  5. package/esm/exporter/font.js +4 -9
  6. package/esm/resource/loaders/remote.js +2 -1
  7. package/esm/resource/loaders/search.js +2 -1
  8. package/esm/runtime/Infographic.d.ts +3 -0
  9. package/esm/runtime/Infographic.js +23 -5
  10. package/esm/syntax/mapper.js +97 -1
  11. package/esm/syntax/schema.js +30 -10
  12. package/esm/syntax/types.d.ts +8 -1
  13. package/esm/utils/fetch.d.ts +1 -0
  14. package/esm/utils/fetch.js +61 -0
  15. package/esm/utils/index.d.ts +1 -0
  16. package/esm/utils/index.js +1 -0
  17. package/lib/exporter/font.js +3 -8
  18. package/lib/resource/loaders/remote.js +2 -1
  19. package/lib/resource/loaders/search.js +2 -1
  20. package/lib/runtime/Infographic.d.ts +3 -0
  21. package/lib/runtime/Infographic.js +23 -5
  22. package/lib/syntax/mapper.js +100 -1
  23. package/lib/syntax/schema.js +30 -10
  24. package/lib/syntax/types.d.ts +8 -1
  25. package/lib/utils/fetch.d.ts +1 -0
  26. package/lib/utils/fetch.js +67 -0
  27. package/lib/utils/index.d.ts +1 -0
  28. package/lib/utils/index.js +1 -0
  29. package/package.json +14 -2
  30. package/src/exporter/font.ts +4 -9
  31. package/src/resource/loaders/remote.ts +2 -1
  32. package/src/resource/loaders/search.ts +2 -1
  33. package/src/runtime/Infographic.tsx +33 -4
  34. package/src/syntax/mapper.ts +135 -1
  35. package/src/syntax/schema.ts +32 -10
  36. package/src/syntax/types.ts +12 -1
  37. package/src/utils/fetch.ts +90 -0
  38. package/src/utils/index.ts +1 -0
package/README.md CHANGED
@@ -1,4 +1,4 @@
1
- <img src="https://gw.alipayobjects.com/zos/antfincdn/R8sN%24GNdh6/language.svg" width="18"> [中文](./README.zh-CN.md) | English
1
+ <img src="https://gw.alipayobjects.com/zos/antfincdn/R8sN%24GNdh6/language.svg" width="18"> [简体中文](./README.zh-CN.md) | English
2
2
 
3
3
  <div align="center">
4
4
 
@@ -15,12 +15,30 @@
15
15
 
16
16
  </div>
17
17
 
18
- **AntV Infographic** is a next-generation **declarative infographic visualization engine** from AntV.
19
- With unified syntax and component architecture, you can render structured data into high-quality infographics in an elegant and flexible way, making information presentation more efficient and data storytelling simpler.
18
+ **AntV Infographic** is AntV's next-generation **declarative infographic visualization engine**. With a carefully designed infographic syntax, it can quickly and flexibly render high-quality infographics, making information presentation more efficient and data storytelling simpler.
20
19
 
21
20
  <div align="center">
22
21
 
23
- [Website](https://infographic.antv.vision) · [GitHub](https://github.com/antvis/infographic) · [Document](https://infographic.antv.vision/learn) · [Gallery](https://infographic.antv.vision/examples) · [AI Agent](https://infographic.antv.vision/ai)
22
+ <p align="center">
23
+ <a href="https://infographic.antv.vision">
24
+ <img src="https://img.shields.io/badge/Website-2F54EB?style=for-the-badge" alt="Website" />
25
+ </a>
26
+ <a href="https://github.com/antvis/infographic">
27
+ <img src="https://img.shields.io/badge/GitHub-000000?style=for-the-badge&logo=github&logoColor=white" alt="GitHub" />
28
+ </a>
29
+ <a href="https://infographic.antv.vision/learn">
30
+ <img src="https://img.shields.io/badge/Docs-722ED1?style=for-the-badge" alt="Docs" />
31
+ </a>
32
+ <a href="https://infographic.antv.vision/examples">
33
+ <img src="https://img.shields.io/badge/Gallery-13C2C2?style=for-the-badge" alt="Gallery" />
34
+ </a>
35
+ <a href="./prompt.md">
36
+ <img src="https://img.shields.io/badge/Prompt-FA8C16?style=for-the-badge" alt="Prompt" />
37
+ </a>
38
+ <a href="https://infographic.antv.vision/ai">
39
+ <img src="https://img.shields.io/badge/AI%20Agent-EB2F96?style=for-the-badge" alt="AI Agent" />
40
+ </a>
41
+ </p>
24
42
 
25
43
  <img src="https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*ZdeISZWHuyIAAAAAbEAAAAgAemJ7AQ/fmt.webp" width="768" alt="AntV Infographic Preview">
26
44
 
@@ -28,13 +46,11 @@ With unified syntax and component architecture, you can render structured data i
28
46
 
29
47
  ## ✨ Features
30
48
 
31
- - 📦 **Ready to use**: 100+ built-in templates, data-item components, and layouts to assemble infographics in minutes
32
- - 🎨 **Themeable**: Hand-drawn (rough), gradients, patterns, multiple presets, and deep customization
33
- - 🧑🏻‍💻 **Built-in editor**: built-in editor for AI-generated infographics, allowing for further customization and refinement
34
- - 🧩 **Composable**: Structures, items, and render units are fully componentized for flexible extension
35
- - 🎯 **Declarative Configuration**: Simple and clear configuration approach, ideal for AI generation, machine understanding, and automated workflows
36
- - 🤖 **AI-friendly**: Declarative config with JSON Schema, ideal for AI generation and automated workflows
37
- - 📐 **High-quality SVG**: Default SVG output for crisp visuals and easy editing/export
49
+ - 🤖 **AI-friendly**: Configuration and syntax are tuned for AI generation, provide concise prompts, and support AI streaming output and rendering
50
+ - 📦 **Ready to use**: ~200 built-in infographic templates, data-item components, and layouts to build professional infographics in minutes
51
+ - 🎨 **Theme system**: Hand-drawn, gradients, patterns, multiple preset themes, plus deep customization
52
+ - 🧑🏻‍💻 **Built-in editor**: Includes an editor for infographics so AI-generated results can be edited further
53
+ - 📐 **High-quality SVG output**: Renders with SVG by default to ensure visual fidelity and easy editing
38
54
 
39
55
  ## 🚀 Installation
40
56
 
@@ -44,6 +60,10 @@ npm install @antv/infographic
44
60
 
45
61
  ## 📝 Quick Start
46
62
 
63
+ [![](https://img.shields.io/badge/Getting%20Started-2F54EB)](https://infographic.antv.vision/learn/getting-started)
64
+ [![](https://img.shields.io/badge/Infographic%20Syntax-13C2C2)](https://infographic.antv.vision/learn/infographic-syntax)
65
+ [![](https://img.shields.io/badge/Configuration-722ED1)](https://infographic.antv.vision/reference/infographic-options)
66
+
47
67
  ```ts
48
68
  import { Infographic } from '@antv/infographic';
49
69
 
@@ -51,47 +71,41 @@ const infographic = new Infographic({
51
71
  container: '#container',
52
72
  width: '100%',
53
73
  height: '100%',
54
- template: 'list-row-simple-horizontal-arrow',
55
- data: {
56
- items: [
57
- { label: 'Step 1', desc: 'Start' },
58
- { label: 'Step 2', desc: 'In Progress' },
59
- { label: 'Step 3', desc: 'Complete' },
60
- ],
61
- },
62
- // Enable editing with the built-in editor
63
74
  editable: true,
64
75
  });
65
76
 
66
- infographic.render();
77
+ infographic.render(`
78
+ infographic list-row-simple-horizontal-arrow
79
+ data
80
+ items:
81
+ - label: Step 1
82
+ desc: Start
83
+ - label: Step 2
84
+ desc: In Progress
85
+ - label: Step 3
86
+ desc: Complete
87
+ `);
67
88
  ```
68
89
 
69
- Render the infographic in the target container.
90
+ The rendered result looks like this:
70
91
 
71
92
  <img src="https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*uvj8Qb26F1MAAAAARAAAAAgAemJ7AQ/fmt.webp" width="480" alt="AntV Infographic DEMO">
72
93
 
73
- For more examples, please refer to the [documentation](https://infographic.antv.vision/examples) site.
74
-
75
- ## 🗂 Configuration
94
+ ## Streaming Rendering
76
95
 
77
- The `InfographicOptions` configuration item required when instantiating the Infographic class, see the information graph syntax for more information.
96
+ [![](https://img.shields.io/badge/Demo-D46A6A)](https://infographic.antv.vision/learn/infographic-syntax)
78
97
 
79
- | Attribute | Type | Required | Description | Reference |
80
- | ----------- | ----------------------- | ---------- | ------------------------------------- | ------------------------------------------------ |
81
- | container | `string \| HTMLElement` | N | Container, can be selector or HTMLElement. | - |
82
- | width | `number \| string` | N | Width, support pixel value or percentage. | - |
83
- | height | `number \| string` | N | Height, support pixel value or percentage. | - |
84
- | padding | `Padding` | N | Padding for container | [Padding](https://infographic.antv.vision/reference/infographic-types#padding) |
85
- | template | `string` | N | Template name | - |
86
- | design | `DesignOptions` | N | Design options | [DesignOptions](https://infographic.antv.vision/reference/infographic-types#design-options) |
87
- | data | `Data` | **Y** | Data for Infographic | [Data](https://infographic.antv.vision/reference/infographic-types#data) |
88
- | theme | `string` | N | Theme name | - |
89
- | themeConfig | `ThemeConfig` | N | Theme configure options | [ThemeConfig](https://infographic.antv.vision/reference/infographic-types#theme-config) |
90
- | svg | `SVGOptions` | N | Options for SVG container | [SVGOptions](https://infographic.antv.vision/reference/infographic-types#svg-options) |
91
- | editable | `boolean` | N | Whethe editable? | - |
98
+ With a highly fault-tolerant infographic syntax you can stream AI output in real time and progressively render the infographic.
92
99
 
93
- For more details, please refer to the [Configuration](https://infographic.antv.vision/reference/infographic-options) section.
100
+ ```ts
101
+ let buffer = '';
102
+ for (const chunk of chunks) {
103
+ buffer += chunk;
104
+ infographic.render(buffer);
105
+ }
106
+ ```
94
107
 
108
+ <img src="https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*e_PFSZrR9AQAAAAASdAAAAgAemJ7AQ/original" width="480" alt="AntV Infographic Streaming Rendering">
95
109
 
96
110
  ## 💬 Community & Communication
97
111
 
package/README.zh-CN.md CHANGED
@@ -15,11 +15,30 @@
15
15
 
16
16
  </div>
17
17
 
18
- **AntV Infographic** 是 AntV 推出的新一代**声明式信息图可视化引擎**。通过统一的语法与组件体系，你可以将结构化数据以优雅、灵活的方式渲染为高质量的信息图，让信息表达更高效，让数据叙事更简单。
18
+ **AntV Infographic** 是 AntV 推出的新一代**声明式信息图可视化引擎**，通过精心设计的信息图语法，能够快速、灵活地渲染出高质量的信息图，让信息表达更高效，让数据叙事更简单。
19
19
 
20
20
  <div align="center">
21
21
 
22
- [官网](https://infographic.antv.vision) · [GitHub](https://github.com/antvis/infographic) · [文档](https://infographic.antv.vision/learn) · [示例](https://infographic.antv.vision/examples) · [AI 生成](https://infographic.antv.vision/ai)
22
+ <p align="center">
23
+ <a href="https://infographic.antv.vision">
24
+ <img src="https://img.shields.io/badge/%E5%AE%98%E7%BD%91-2F54EB?style=for-the-badge" alt="官网" />
25
+ </a>
26
+ <a href="https://github.com/antvis/infographic">
27
+ <img src="https://img.shields.io/badge/GitHub-000000?style=for-the-badge&logo=github&logoColor=white" alt="GitHub" />
28
+ </a>
29
+ <a href="https://infographic.antv.vision/learn">
30
+ <img src="https://img.shields.io/badge/%E6%96%87%E6%A1%A3-722ED1?style=for-the-badge" alt="文档" />
31
+ </a>
32
+ <a href="https://infographic.antv.vision/examples">
33
+ <img src="https://img.shields.io/badge/%E7%A4%BA%E4%BE%8B-13C2C2?style=for-the-badge" alt="示例" />
34
+ </a>
35
+ <a href="./prompt.zh-CN.md">
36
+ <img src="https://img.shields.io/badge/Prompt-FA8C16?style=for-the-badge" alt="Prompt" />
37
+ </a>
38
+ <a href="https://infographic.antv.vision/ai">
39
+ <img src="https://img.shields.io/badge/AI%20Agent-EB2F96?style=for-the-badge" alt="AI Agent" />
40
+ </a>
41
+ </p>
23
42
 
24
43
  <img src="https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*ZdeISZWHuyIAAAAAbEAAAAgAemJ7AQ/fmt.webp" width="768" alt="AntV Infographic 预览">
25
44
 
@@ -27,12 +46,10 @@
27
46
 
28
47
  ## ✨ 特性
29
48
 
30
- - 📦 **开箱即用**：内置 100+ 信息图模板、数据项组件与布局，快速构建专业信息图
31
- - 🎨 **主题系统**：支持手绘（rough）、渐变、图案、多套预设主题，并支持深度自定义
32
- - 🧑🏻‍💻 **内置编辑器**：内置信息图的编辑器，让 AI 生成之后可以二次编辑微调
33
- - 🧩 **组件化架构**：数据项、结构布局、渲染单元完全组件化，可灵活组合与扩展
34
- - 🎯 **声明式配置**：简单清晰的配置方式，更适合 AI 生成、机器理解与自动化流程
35
- - 🤖 **AI 友好**：完善的 JSON Schema 定义，使大模型可自动生成可用配置
49
+ - 🤖 **AI 友好**：配置和语法更适合 AI 生成，提供简洁有效的 Prompt，支持 AI 流式输出和渲染
50
+ - 📦 **开箱即用**：内置 ~200 信息图模板、数据项组件与布局，快速构建专业信息图
51
+ - 🎨 **主题系统**：支持手绘、渐变、图案、多套预设主题，允许深度自定义
52
+ - 🧑🏻‍💻 **内置编辑器**：内置信息图的编辑器，让 AI 生成之后可以二次编辑
36
53
  - 📐 **高质量 SVG 输出**：默认基于 SVG 渲染，保证视觉品质与可编辑性
37
54
 
38
55
  ## 🚀 安装
@@ -43,6 +60,10 @@ npm install @antv/infographic
43
60
 
44
61
  ## 📝 快速开始
45
62
 
63
+ [![](https://img.shields.io/badge/%E5%85%A5%E9%97%A8%E6%8C%87%E5%8D%97-2F54EB)](https://infographic.antv.vision/learn/getting-started)
64
+ [![](https://img.shields.io/badge/%E4%BF%A1%E6%81%AF%E5%9B%BE%E8%AF%AD%E6%B3%95-13C2C2)](https://infographic.antv.vision/learn/infographic-syntax)
65
+ [![](https://img.shields.io/badge/%E9%85%8D%E7%BD%AE%E9%A1%B9-722ED1)](https://infographic.antv.vision/reference/infographic-options)
66
+
46
67
  ```ts
47
68
  import { Infographic } from '@antv/infographic';
48
69
 
@@ -50,46 +71,41 @@ const infographic = new Infographic({
50
71
  container: '#container',
51
72
  width: '100%',
52
73
  height: '100%',
53
- template: 'list-row-simple-horizontal-arrow',
54
- data: {
55
- items: [
56
- { label: '步骤 1', desc: '开始' },
57
- { label: '步骤 2', desc: '进行中' },
58
- { label: '步骤 3', desc: '完成' },
59
- ],
60
- },
61
- // 开启内置编辑器
62
74
  editable: true,
63
75
  });
64
76
 
65
- infographic.render();
77
+ infographic.render(`
78
+ infographic list-row-simple-horizontal-arrow
79
+ data
80
+ items:
81
+ - label: Step 1
82
+ desc: Start
83
+ - label: Step 2
84
+ desc: In Progress
85
+ - label: Step 3
86
+ desc: Complete
87
+ `);
66
88
  ```
67
89
 
68
- 然后你可以在容器中看到信息图渲染出来。
90
+ 渲染结果如下：
69
91
 
70
92
  <img src="https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*uvj8Qb26F1MAAAAARAAAAAgAemJ7AQ/fmt.webp" width="480" alt="AntV Infographic DEMO">
71
93
 
72
- 更多示例请参考[文档站点](https://infographic.antv.vision/examples)。
94
+ ## 流式渲染
73
95
 
74
- ## 🗂 配置
96
+ [![](https://img.shields.io/badge/Demo-D46A6A)](https://infographic.antv.vision/learn/infographic-syntax)
75
97
 
76
- 实例化 `Infographic` 类时所需传入的 `InfographicOptions` 配置项，具体配置如下：
98
+ 使用具有高容错性的信息图语法能够实时接收 AI 流式输出并逐步渲染信息图。
77
99
 
78
- | 属性 | 类型 | 必填 | 说明 | 引用 |
79
- | ----------- | ----------------------- | ------ | -------------------------------------- | ------------------------------------------------ |
80
- | container | `string \| HTMLElement` | 否 | 容器，可以是选择器或者 HTMLElement | - |
81
- | width | `number \| string` | 否 | 宽度，支持数字（像素值）或者百分比形式 | - |
82
- | height | `number \| string` | 否 | 高度，支持数字（像素值）或者百分比形式 | - |
83
- | padding | `Padding` | 否 | 容器内边距 | [Padding](/reference/infographic-types#padding) |
84
- | template | `string` | 否 | 模板 | - |
85
- | design | `DesignOptions` | 否 | 设计 | [DesignOptions](/reference/infographic-types#design-options) |
86
- | data | `Data` | **是** | 数据 | [Data](/reference/infographic-types#data) |
87
- | theme | `string` | 否 | 主题 | - |
88
- | themeConfig | `ThemeConfig` | 否 | 额外主题配置 | [ThemeConfig](/reference/infographic-types#theme-config) |
89
- | svg | `SVGOptions` | 否 | SVG 容器上的配置 | [SVGOptions](/reference/infographic-types#svg-options) |
90
- | editable | `boolean` | 否 | 是否开启编辑能力 | - |
100
+ ```ts
101
+ let buffer = '';
102
+ for (const chunk of chunks) {
103
+ buffer += chunk;
104
+ infographic.render(buffer);
105
+ }
106
+ ```
91
107
 
92
- 更多配置项请查看 [配置项](https://infographic.antv.vision/reference/infographic-options)。
108
+ <img src="https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*e_PFSZrR9AQAAAAASdAAAAgAemJ7AQ/original" width="480" alt="AntV Infographic 流式渲染">
93
109
 
94
110
  ## 💬 社区与交流
95
111