@antv/infographic 0.1.2 → 0.1.4

package/README.md

@@ -8,6 +8,7 @@
 
 [![npm version](https://img.shields.io/npm/v/@antv/infographic.svg)](https://www.npmjs.com/package/@antv/infographic)
 [![build status](https://img.shields.io/github/actions/workflow/status/antvis/infographic/build.yml)](https://github.com/antvis/infographic/actions)
+![Visitors](https://hitscounter.dev/api/hit?url=https://github.com/antvis/infographic&label=Visitors&icon=graph-up&color=%23dc3545&message=&style=flat&tz=UTC)
 [![license](https://img.shields.io/npm/l/@antv/infographic.svg)](./LICENSE)
 
 <img src="https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*EdkXSojOxqsAAAAAQHAAAAgAemJ7AQ/original" width="256">
@@ -29,9 +30,9 @@ With unified syntax and component architecture, you can render structured data i
 
 - 📦 **Ready to use**: 100+ built-in templates, data-item components, and layouts to assemble infographics in minutes
 - 🎨 **Themeable**: Hand-drawn (rough), gradients, patterns, multiple presets, and deep customization
+- 🧑🏻‍💻 **Built-in editor**: built-in editor for AI-generated infographics, allowing for further customization and refinement
 - 🧩 **Composable**: Structures, items, and render units are fully componentized for flexible extension
 - 🎯 **Declarative Configuration**: Simple and clear configuration approach, ideal for AI generation, machine understanding, and automated workflows
-
 - 🤖 **AI-friendly**: Declarative config with JSON Schema, ideal for AI generation and automated workflows
 - 📐 **High-quality SVG**: Default SVG output for crisp visuals and easy editing/export
 
@@ -58,6 +59,8 @@ const infographic = new Infographic({
       { label: 'Step 3', desc: 'Complete' },
     ],
   },
+  // Enable editing with the built-in editor
+  editable: true,
 });
 
 infographic.render();
@@ -65,10 +68,31 @@ infographic.render();
 
 Render the infographic in the target container.
 
-![](https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*uvj8Qb26F1MAAAAARAAAAAgAemJ7AQ/fmt.webp)
+<img src="https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*uvj8Qb26F1MAAAAARAAAAAgAemJ7AQ/fmt.webp" width="480" alt="AntV Infographic DEMO">
 
 For more examples, please refer to the [documentation](https://infographic.antv.vision/examples) site.
 
+## 🗂 Configuration
+
+The `InfographicOptions` configuration item required when instantiating the Infographic class, see the information graph syntax for more information.
+
+| Attribute   | Type                    | Required   | Description                           | Reference                                        |
+| ----------- | ----------------------- | ---------- | ------------------------------------- | ------------------------------------------------ |
+| container   | `string \| HTMLElement` | N     | Container, can be selector or HTMLElement. | -                                                                                           |
+| width       | `number \| string`      | N     | Width, support pixel value or percentage.  | -                                                                                           |
+| height      | `number \| string`      | N     | Height, support pixel value or percentage. | -                                                                                           |
+| padding     | `Padding`               | N     | Padding for container                      | [Padding](https://infographic.antv.vision/reference/infographic-types#padding)              |
+| template    | `string`                | N     | Template name                              | -                                                                                           |
+| design      | `DesignOptions`         | N     | Design options                             | [DesignOptions](https://infographic.antv.vision/reference/infographic-types#design-options) |
+| data        | `Data`                  | **Y** | Data for Infographic                       | [Data](https://infographic.antv.vision/reference/infographic-types#data)                    |
+| theme       | `string`                | N     | Theme name                                 | -                                                                                           |
+| themeConfig | `ThemeConfig`           | N     | Theme configure options                    | [ThemeConfig](https://infographic.antv.vision/reference/infographic-types#theme-config)     |
+| svg         | `SVGOptions`            | N     | Options for SVG container                  | [SVGOptions](https://infographic.antv.vision/reference/infographic-types#svg-options)       |
+| editable    | `boolean`               | N     | Whethe editable?                           | -                                                                                           |
+
+For more details, please refer to the [Configuration](https://infographic.antv.vision/reference/infographic-options) section.
+
+
 ## 💬 Community & Communication
 
 - Submit your questions or suggestions on GitHub

package/README.zh-CN.md

@@ -8,14 +8,14 @@
 
 [![npm version](https://img.shields.io/npm/v/@antv/infographic.svg)](https://www.npmjs.com/package/@antv/infographic)
 [![build status](https://img.shields.io/github/actions/workflow/status/antvis/infographic/build.yml)](https://github.com/antvis/infographic/actions)
+![Visitors](https://hitscounter.dev/api/hit?url=https://github.com/antvis/infographic&label=Visitors&icon=graph-up&color=%23dc3545&message=&style=flat&tz=UTC)
 [![license](https://img.shields.io/npm/l/@antv/infographic.svg)](./LICENSE)
 
 <img src="https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*EdkXSojOxqsAAAAAQHAAAAgAemJ7AQ/original" width="256">
 
 </div>
 
-**AntV Infographic** 是 AntV 推出的新一代**声明式信息图可视化引擎**。
-通过统一的语法与组件体系，你可以将结构化数据以优雅、灵活的方式渲染为高质量的信息图，让信息表达更高效，让数据叙事更简单。
+**AntV Infographic** 是 AntV 推出的新一代**声明式信息图可视化引擎**。通过统一的语法与组件体系，你可以将结构化数据以优雅、灵活的方式渲染为高质量的信息图，让信息表达更高效，让数据叙事更简单。
 
 <div align="center">
 
@@ -29,6 +29,7 @@
 
 - 📦 **开箱即用**：内置 100+ 信息图模板、数据项组件与布局，快速构建专业信息图
 - 🎨 **主题系统**：支持手绘（rough）、渐变、图案、多套预设主题，并支持深度自定义
+- 🧑🏻‍💻 **内置编辑器**：内置信息图的编辑器，让 AI 生成之后可以二次编辑微调
 - 🧩 **组件化架构**：数据项、结构布局、渲染单元完全组件化，可灵活组合与扩展
 - 🎯 **声明式配置**：简单清晰的配置方式，更适合 AI 生成、机器理解与自动化流程
 - 🤖 **AI 友好**：完善的 JSON Schema 定义，使大模型可自动生成可用配置
@@ -57,6 +58,8 @@ const infographic = new Infographic({
       { label: '步骤 3', desc: '完成' },
     ],
   },
+  // 开启内置编辑器
+  editable: true,
 });
 
 infographic.render();
@@ -64,10 +67,30 @@ infographic.render();
 
 然后你可以在容器中看到信息图渲染出来。
 
-![](https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*uvj8Qb26F1MAAAAARAAAAAgAemJ7AQ/fmt.webp)
+<img src="https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*uvj8Qb26F1MAAAAARAAAAAgAemJ7AQ/fmt.webp" width="480" alt="AntV Infographic DEMO">
 
 更多示例请参考[文档站点](https://infographic.antv.vision/examples)。
 
+## 🗂 配置
+
+实例化 `Infographic` 类时所需传入的 `InfographicOptions` 配置项，具体配置如下：
+
+| 属性        | 类型                    | 必填   | 说明                                   | 引用                                             |
+| ----------- | ----------------------- | ------ | -------------------------------------- | ------------------------------------------------ |
+| container   | `string \| HTMLElement` | 否     | 容器，可以是选择器或者 HTMLElement         | -                                                    |
+| width       | `number \| string`      | 否     | 宽度，支持数字（像素值）或者百分比形式        | -                                                       |
+| height      | `number \| string`      | 否     | 高度，支持数字（像素值）或者百分比形式        | -                                                        |
+| padding     | `Padding`               | 否     | 容器内边距                             | [Padding](/reference/infographic-types#padding)     |
+| template    | `string`                | 否     | 模板                                   | -                                                |
+| design      | `DesignOptions`         | 否     | 设计                                   | [DesignOptions](/reference/infographic-types#design-options) |
+| data        | `Data`                  | **是** | 数据                                   | [Data](/reference/infographic-types#data)                    |
+| theme       | `string`                | 否     | 主题                                   | -                                                |
+| themeConfig | `ThemeConfig`           | 否     | 额外主题配置                           | [ThemeConfig](/reference/infographic-types#theme-config)     |
+| svg         | `SVGOptions`            | 否     | SVG 容器上的配置                       | [SVGOptions](/reference/infographic-types#svg-options)       |
+| editable    | `boolean`               | 否     | 是否开启编辑能力                        | -                                                     |
+
+更多配置项请查看 [配置项](https://infographic.antv.vision/reference/infographic-options)。
+
 ## 💬 社区与交流
 
 - 在 GitHub 提交你的问题或建议