Skip to content

README-en_US.md

Latest commit

 

History

History
156 lines (120 loc) · 6.18 KB

README-en_US.md

File metadata and controls

156 lines (120 loc) · 6.18 KB

feffery-infographic

🦋 Easily build next-generation declarative infographic visualizations

Plotly Dash GitHub PyPI Ruff

简体中文 | English

Infographic Preview

A component library for the Python full-stack application development framework Plotly Dash, based on AntV Infographic, providing rich infographic rendering capabilities.

Table of Contents

1 Installation
2 API
3 Basic Usage
4 Infographic Syntax Reference
5 All Available Infographic Examples
6 Contributors
7 Advanced Usage

1 Installation

pip install feffery-infographic -U

2 API

Infographic Component

Property Name Type Default Description
id string - Unique ID for the component.
key string - Update the key value of the current component to force a redraw.
style dict - CSS style object for the current component.
className string - CSS class name for the current component.
syntax string - Required, syntax string for defining the infographic content.
width number | string - Width of the infographic container, supports number or string (e.g., '100%').
height number | string - Height of the infographic container, supports number or string (e.g., '500px').
padding number | list - Padding of the infographic container, supports number or array format (e.g., [top, right, bottom, left]).
editable boolean False Whether to enable editable mode.
exportTrigger dict - Configuration object for triggering image export or download operations. Each update triggers the operation and resets to empty after execution.
exportEvent dict - Data object listening for the latest image export event.
debugWindowInstanceName string - For debugging purposes. If set, mounts the current component instance to the window object under the specified variable name.

exportTrigger Configuration Details:

  • type: string, format of the exported image. Options are 'png', 'svg'. Default is 'png'.
  • dpr: number, pixel ratio when exporting 'png' images. Default is 1.
  • download: boolean, whether to automatically trigger browser download. Default is True.
  • fileName: string, name of the downloaded file (without extension). Default is 'infographic_export'.

exportEvent Structure Details:

  • timestamp: number, timestamp when the event was triggered.
  • type: string, format of the exported image. Possible values are 'png' or 'svg'.
  • data: string, dataURL data of the exported image.

Built-in Prompt Module

The feffery_infographic.prompts module includes built-in prompts for Large Language Models (LLMs), designed to assist in generating standard infographic syntax content.

Variable Name Description
base_prompt System prompt suitable for Chinese scenarios, containing detailed syntax specifications, template descriptions, and generation processes.
base_prompt_en System prompt suitable for English scenarios, with content structure consistent with base_prompt.

Usage Example:

from feffery_infographic.prompts import base_prompt_en

# Pass base_prompt_en as a system message to the LLM
messages = [
    {"role": "system", "content": base_prompt_en},
    {"role": "user", "content": "Please help me generate a timeline infographic about the history of the Internet."}
]

3 Basic Usage

import dash
from dash import html
import feffery_infographic as fi

app = dash.Dash(__name__)

app.layout = html.Div(
    [
        fi.Infographic(
            # 定义信息图语法
            syntax="""
infographic list-row-simple-horizontal-arrow
data
  items
    - label 步骤 1
      desc 开始
    - label 步骤 2
      desc 进行中
    - label 步骤 3
      desc 完成
""",
        )
    ],
    style={'padding': 50},
)

if __name__ == '__main__':
    app.run(debug=True)

Basic Usage

4 Infographic Syntax Reference

👉 https://infographic.antv.vision/learn/infographic-syntax

5 All Available Infographic Examples

👉 https://infographic.antv.vision/gallery

6 Contributors

7 Advanced Usage

Scenario Description Source Code
Stream Rendering Demonstrates streaming update rendering of infographic syntax based on common SSE services stream_render_example
Editable Main elements like text in the infographic can be further edited manually online editable_example
Download Image Calls the component's built-in image download function, supporting svg and png formats download_example