mirror of
https://github.com/antvis/chart-visualization-skills.git
synced 2026-09-14 15:58:00 +08:00
Migrate narrative-text-visualization skill from JSON Schema to T8 Syntax (#30)
This commit is contained in:
@@ -38,7 +38,7 @@
|
||||
},
|
||||
{
|
||||
"name": "narrative-text-visualization",
|
||||
"description": "Generate structured narrative text visualizations from data using T8 schema. Creates data interpretation reports with entity labeling.",
|
||||
"description": "Generate structured narrative text visualizations from data using T8 Syntax. Creates data interpretation reports with semantic entity annotations using a declarative Markdown-like language.",
|
||||
"source": "./",
|
||||
"strict": false,
|
||||
"skills": [
|
||||
|
||||
@@ -42,9 +42,9 @@ npx skills add antvis/chart-visualization-skills
|
||||
|
||||
`Icon Search` helps users find appropriate icons for various use cases including infographics, web development, design, and more. Search by keywords to discover available icons and retrieve their SVG strings directly. Each search returns up to 5 matching icons by default (customizable via topK parameter) with their URLs and complete SVG content.
|
||||
|
||||
- 📝 **narrative-text-visualization**: Generate structured narrative text visualizations from data using T8 schema.
|
||||
- 📝 **narrative-text-visualization**: Generate structured narrative text visualizations from data using T8 Syntax.
|
||||
|
||||
`Narrative Text Visualization` (T8) transforms unstructured data into semantically rich narrative reports with entity labeling. It uses a declarative JSON Schema to describe data interpretation reports, making it easy for LLMs to generate structured articles with proper semantic markup. Perfect for creating data analysis reports, summaries, and insights documents with entities like metrics, values, trends, and dimensions properly labeled. Supports authentic data sources and provides lightweight, technology-agnostic rendering.
|
||||
`Narrative Text Visualization` (T8) transforms unstructured data into semantically rich narrative reports using T8 Syntax - a declarative Markdown-like language for creating data narratives with entity annotations. It's LLM-friendly and framework-agnostic, working seamlessly with HTML, React, and Vue. Perfect for creating data analysis reports, summaries, and insights documents with entities like metrics, values, trends, and dimensions properly labeled. Features include built-in mini charts, standardized styling, and professional formatting. Supports authentic data sources and provides lightweight, technology-agnostic rendering.
|
||||
|
||||
> [!TIP]
|
||||
> More skills are coming soon.
|
||||
|
||||
@@ -1,18 +1,22 @@
|
||||
---
|
||||
name: narrative-text-visualization
|
||||
description: Generate structured narrative text visualizations from data using T8 (Text) schema. Use when users want to create data interpretation reports, summaries, or structured articles with entity labeling and semantic markup.
|
||||
description: Generate structured narrative text visualizations from data using T8 Syntax. Use when users want to create data interpretation reports, summaries, or structured articles with semantic entity annotations. T8 is designed for unstructured data visualization where T stands for Text and 8 represents a byte of 8 bits, symbolizing deep insights beneath the text.
|
||||
---
|
||||
|
||||
# Narrative Text Visualization Skill
|
||||
|
||||
This skill provides a workflow for transforming data into structured narrative text visualizations using the AntV T8 (Text) schema. T8 is designed for unstructured data visualization where `T` stands for Text, and `8` represents a byte of 8 bits, symbolizing deep insights hidden beneath the text.
|
||||
This skill provides a workflow for transforming data into structured narrative text visualizations using **T8 Syntax** - a declarative Markdown-like language for creating data narratives with semantic entity annotations.
|
||||
|
||||
## Overview
|
||||
## What is T8
|
||||
|
||||
`T8` is a declarative JSON Schema syntax used to describe data interpretation reports with semantic entity labeling. It's designed to be:
|
||||
- **LLM-friendly**: Easy to generate with AI prompts
|
||||
- **Technology stack agnostic**: Works with React, Vue, and other frameworks
|
||||
- **Extensible**: Supports custom entity phrases
|
||||
T8 is a text visualization solution under the AntV technology stack designed specifically for insight-based narrative text display. Instead of manually constructing DOM elements, you write simple, human-readable syntax that describes your data narrative.
|
||||
|
||||
**Key Features:**
|
||||
- **LLM-Friendly**: The syntax is intuitive and can be easily generated by AI models
|
||||
- **Declarative & Readable**: Write what you want, not how to build it
|
||||
- **Framework Agnostic**: Works with React, Vue, or vanilla JavaScript
|
||||
- **Standardized Styling**: Professional appearance by default
|
||||
- **Built-in Data Visualizations**: Mini charts (pie, line) are native to the syntax
|
||||
- **Lightweight**: Less than 20KB before gzip
|
||||
|
||||
## Workflow
|
||||
@@ -27,37 +31,224 @@ Analyze the user's request to determine:
|
||||
- The key insights to highlight
|
||||
- Any specific data sources or metrics
|
||||
|
||||
### 2. Review the JSON Schema
|
||||
### 2. Generate T8 Syntax Content
|
||||
|
||||
Consult the `references/schema.json` file to understand the T8 structure:
|
||||
- **Top Structure**: Contains `headline` and `sections` array
|
||||
- **Sections**: Main chapters containing `paragraphs`
|
||||
- **Paragraphs**: Text blocks containing `phrases`, can be:
|
||||
- `normal`: Regular text paragraphs
|
||||
- `heading1-6`: Heading levels
|
||||
- `bullets`: Bulleted/ordered lists
|
||||
- **Phrases**: Text elements that can be:
|
||||
- `text`: Plain text
|
||||
- `entity`: Semantically labeled data with metadata
|
||||
Create narrative text using T8 Syntax following the specification below. The content must include:
|
||||
- Proper document structure (headings, paragraphs, lists)
|
||||
- Entity annotations for all meaningful data points
|
||||
- Appropriate metadata for entities (origin, assessment, etc.)
|
||||
|
||||
### 3. Entity Labeling
|
||||
### 3. Generate Frontend Code
|
||||
|
||||
Use entity types to mark key information (see `references/prompt.md` for details):
|
||||
Create HTML, React, or Vue code to render the T8 content based on user's preferred framework.
|
||||
|
||||
| Entity Type | Description | Example |
|
||||
| -------------------- | ----------------------- | ------------------------------------ |
|
||||
| `metric_name` | Indicator name | "Shipment", "Growth Rate" |
|
||||
| `metric_value` | Main indicator value | "146 million units", "120 factories" |
|
||||
| `other_metric_value` | Other metric values | "$19.2 billion" |
|
||||
| `delta_value` | Difference | "+120" |
|
||||
| `ratio_value` | Rate | "+8.4%", "9%" |
|
||||
| `contribute_ratio` | Contribution | "40%" |
|
||||
| `trend_desc` | Trend Description | "Continuously Rising", "Stable" |
|
||||
| `dim_value` | Dimensional identifier | "India", "Jiangsu", "Overseas" |
|
||||
| `time_desc` | Time stamp | "Q3 2024", "all year" |
|
||||
| `proportion` | Proportion description | "30%" |
|
||||
### 4. Validate Output
|
||||
|
||||
### 4. Data Requirements
|
||||
Ensure:
|
||||
- All data is from authentic sources
|
||||
- Minimum content length (800 words or equivalent)
|
||||
- Proper entity annotations throughout
|
||||
- Clear structure and logical flow
|
||||
|
||||
---
|
||||
|
||||
## T8 Syntax Specification
|
||||
|
||||
T8 Syntax is a Markdown-like language for creating narrative text with semantic entity annotations. It makes data analysis reports more expressive and visually appealing.
|
||||
|
||||
### Document Structure
|
||||
|
||||
#### Headings (6 levels)
|
||||
|
||||
Use standard Markdown heading syntax:
|
||||
|
||||
```
|
||||
# Level 1 Heading (Main Title)
|
||||
## Level 2 Heading (Section)
|
||||
### Level 3 Heading (Subsection)
|
||||
#### Level 4 Heading
|
||||
##### Level 5 Heading
|
||||
###### Level 6 Heading
|
||||
```
|
||||
|
||||
**Rules:**
|
||||
- Each heading must be on its own line
|
||||
- Add one space after the `#` symbols
|
||||
- Headings create visual hierarchy in the rendered output
|
||||
|
||||
#### Paragraphs
|
||||
|
||||
Regular text paragraphs are separated by blank lines:
|
||||
|
||||
```
|
||||
This is the first paragraph with some content.
|
||||
|
||||
This is the second paragraph, separated by a blank line.
|
||||
```
|
||||
|
||||
**Rules:**
|
||||
- Paragraphs can span multiple lines
|
||||
- Use blank lines to separate distinct paragraphs
|
||||
- Text within a paragraph flows naturally
|
||||
|
||||
#### Lists
|
||||
|
||||
T8 Syntax supports both unordered and ordered lists.
|
||||
|
||||
**Unordered Lists:**
|
||||
```
|
||||
- First item
|
||||
- Second item
|
||||
- Third item
|
||||
```
|
||||
|
||||
**Ordered Lists:**
|
||||
```
|
||||
1. First step
|
||||
2. Second step
|
||||
3. Third step
|
||||
```
|
||||
|
||||
**Rules:**
|
||||
- Each list item must be on its own line
|
||||
- Add one space after the bullet marker (`-`, `*`) or number
|
||||
- Lists can contain entities and text formatting
|
||||
|
||||
### Text Formatting
|
||||
|
||||
T8 Syntax supports inline text formatting using Markdown syntax:
|
||||
|
||||
**Bold Text:** `This is **bold text** that stands out.`
|
||||
|
||||
**Italic Text:** `This is *italic text* for emphasis.`
|
||||
|
||||
**Underline Text:** `This is __underlined text__ for importance.`
|
||||
|
||||
**Links:** `Visit [our website](https://example.com) for more information.`
|
||||
|
||||
**Rules:**
|
||||
- Formatting markers must be balanced (opening and closing)
|
||||
- Formatting can be combined with entities
|
||||
- Links use `[text](URL)` syntax where URL starts with `http://`, `https://`, or `/`
|
||||
|
||||
### Entity Annotation Syntax
|
||||
|
||||
The core feature of T8 Syntax is **entity annotation** - marking specific data points with semantic meaning and metadata.
|
||||
|
||||
#### Basic Entity Syntax
|
||||
|
||||
```
|
||||
[displayText](entityType)
|
||||
```
|
||||
|
||||
- `displayText`: The text shown to readers
|
||||
- `entityType`: The semantic type of this entity
|
||||
|
||||
**Example:**
|
||||
```
|
||||
The [sales revenue](metric_name) reached [¥1.5 million](metric_value) this quarter.
|
||||
```
|
||||
|
||||
#### Entity with Metadata
|
||||
|
||||
```
|
||||
[displayText](entityType, key1=value1, key2=value2, key3="string value")
|
||||
```
|
||||
|
||||
**Metadata Rules:**
|
||||
- Separate multiple metadata fields with commas
|
||||
- Numbers and booleans: write directly (e.g., `origin=1500000`, `active=true`)
|
||||
- Strings: wrap in double quotes (e.g., `unit="元"`, `region="Asia"`)
|
||||
|
||||
**Example:**
|
||||
```
|
||||
Revenue grew by [15.3%](ratio_value, origin=0.153, assessment="positive") compared to last year.
|
||||
```
|
||||
|
||||
### Entity Types Reference
|
||||
|
||||
Use these entity types to annotate different kinds of data:
|
||||
|
||||
| Entity Type | Description | When to Use | Examples |
|
||||
| -------------------- | ------------------------------------ | ---------------------------------------------- | -------------------------------------------------------- |
|
||||
| `metric_name` | Name of a metric or KPI | When mentioning what you're measuring | "revenue", "user count", "market share" |
|
||||
| `metric_value` | Primary metric value | The main number/value being reported | "¥1.5 million", "50,000 users", "250 units" |
|
||||
| `other_metric_value` | Secondary or supporting metric value | Additional metrics that provide context | "average order value: $120" |
|
||||
| `delta_value` | Absolute change/difference | When showing numeric change between periods | "+1,200 units", "-$50K", "increased by 500" |
|
||||
| `ratio_value` | Percentage change/rate | When showing percentage change | "+15.3%", "-5.2%", "grew 23%" |
|
||||
| `contribute_ratio` | Contribution percentage | When showing what % something contributes | "accounts for 45%", "represents 30% of total" |
|
||||
| `trend_desc` | Trend description | Describing direction/pattern of change | "steadily rising", "declining trend", "stable" |
|
||||
| `dim_value` | Dimensional value/category | Geographic, categorical, or segmentation data | "North America", "Enterprise segment", "Q3" |
|
||||
| `time_desc` | Time period or timestamp | When specifying when something occurred | "Q3 2024", "January-March", "fiscal year 2023" |
|
||||
| `proportion` | Proportion or ratio | When expressing parts of a whole | "3 out of 5", "60% of customers" |
|
||||
| `rank` | Ranking or position | When indicating order or position in a list | "ranked 1st", "top 3", "5th place" |
|
||||
| `difference` | Comparative difference | When highlighting difference between two items | "difference of $50K", "gap of 200 units" |
|
||||
| `anomaly` | Unusual or unexpected value | When pointing out outliers or anomalies | "unusual spike", "unexpected drop" |
|
||||
| `association` | Relationship or correlation | When describing connections between metrics | "strongly correlated", "linked to", "related" |
|
||||
| `distribution` | Data distribution pattern | When describing how data is spread | "evenly distributed", "concentrated in", "spread across" |
|
||||
| `seasonality` | Seasonal pattern or trend | When describing recurring seasonal patterns | "seasonal peak", "holiday period", "Q4 surge" |
|
||||
|
||||
### Common Metadata Fields
|
||||
|
||||
Add these optional fields to provide richer data context:
|
||||
|
||||
#### `origin` (number)
|
||||
|
||||
The raw numerical value behind the displayed text.
|
||||
|
||||
**Examples:**
|
||||
- `[¥1.5M](metric_value, origin=1500000)`
|
||||
- `[23.7%](ratio_value, origin=0.237)`
|
||||
- `[5.2K users](metric_value, origin=5200)`
|
||||
- `[3 out of 4](proportion, origin=0.75)`
|
||||
|
||||
**Why use it:** Enables data visualization, sorting, and calculations
|
||||
|
||||
#### `assessment` (string)
|
||||
|
||||
Evaluates whether a change is positive, negative, or neutral.
|
||||
|
||||
**Valid values:** `"positive"`, `"negative"`, `"equal"`, `"neutral"`
|
||||
|
||||
**Examples:**
|
||||
- `[increased 15%](ratio_value, assessment="positive")`
|
||||
- `[dropped 8%](ratio_value, assessment="negative")`
|
||||
- `[remained flat](trend_desc, assessment="equal")`
|
||||
|
||||
**Why use it:** Enables visual indicators (colors, icons) for good/bad trends
|
||||
|
||||
#### `unit` (string)
|
||||
|
||||
The unit of measurement for the value.
|
||||
|
||||
**Examples:**
|
||||
- `[¥1,500,000](metric_value, unit="元", origin=1500000)`
|
||||
- `[150](metric_value, unit="units")`
|
||||
|
||||
#### `detail` (any)
|
||||
|
||||
Additional context or breakdown data for chart rendering. Required for certain entity types.
|
||||
|
||||
**Required for these entity types:**
|
||||
- `rank`: Array of numbers representing ranking data
|
||||
- Example: `[top performer](rank, detail=[5, 8, 12, 15, 20])`
|
||||
- `difference`: Array of numbers showing comparative values
|
||||
- Example: `[gap narrowing](difference, detail=[100, 80, 60, 40])`
|
||||
- `anomaly`: Array of numbers highlighting outliers
|
||||
- Example: `[unusual spike](anomaly, detail=[10, 12, 11, 45, 13])`
|
||||
- `association`: Array of {x, y} objects for correlation data
|
||||
- Example: `[strong correlation](association, detail=[{"x":1,"y":2},{"x":2,"y":4},{"x":3,"y":6}])`
|
||||
- `distribution`: Array of numbers showing data spread
|
||||
- Example: `[uneven distribution](distribution, detail=[5, 15, 45, 25, 10])`
|
||||
- `seasonality`: Object with data array and optional range
|
||||
- Example: `[Q4 peak](seasonality, detail={"data":[10,12,15,30],"range":[0,40]})`
|
||||
|
||||
**Optional for other types:**
|
||||
- `[steady growth](trend_desc, detail=[100, 120, 145, 180, 210])`
|
||||
|
||||
---
|
||||
|
||||
## Data Requirements
|
||||
|
||||
**Critical**: All data must be from publicly authentic sources:
|
||||
- Official announcements/financial reports
|
||||
@@ -66,169 +257,263 @@ Use entity types to mark key information (see `references/prompt.md` for details
|
||||
- **Never use fictional, AI-guessed, or simulated data**
|
||||
- Use specific numbers (e.g., "146 million units", "7058 units"), not vague approximations
|
||||
|
||||
### 5. Generate JSON Schema
|
||||
---
|
||||
|
||||
Create a JSON object following the T8 schema structure:
|
||||
## Complete T8 Syntax Example
|
||||
|
||||
```json
|
||||
{
|
||||
"headline": {
|
||||
"type": "headline",
|
||||
"phrases": [
|
||||
{
|
||||
"type": "text",
|
||||
"value": "Article Title"
|
||||
}
|
||||
]
|
||||
},
|
||||
"sections": [
|
||||
{
|
||||
"paragraphs": [
|
||||
{
|
||||
"type": "normal",
|
||||
"phrases": [
|
||||
{
|
||||
"type": "text",
|
||||
"value": "In Q3 2024, "
|
||||
},
|
||||
{
|
||||
"type": "entity",
|
||||
"value": "smartphone shipments",
|
||||
"metadata": {
|
||||
"entityType": "metric_name"
|
||||
}
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"value": " reached "
|
||||
},
|
||||
{
|
||||
"type": "entity",
|
||||
"value": "146 million units",
|
||||
"metadata": {
|
||||
"entityType": "metric_value",
|
||||
"origin": 146000000,
|
||||
"assessment": "positive"
|
||||
}
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"value": ", showing a year-over-year increase of "
|
||||
},
|
||||
{
|
||||
"type": "entity",
|
||||
"value": "+8.4%",
|
||||
"metadata": {
|
||||
"entityType": "ratio_value",
|
||||
"origin": 0.084,
|
||||
"assessment": "positive"
|
||||
}
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"value": "."
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
```
|
||||
# 2024 Smartphone Market Analysis
|
||||
|
||||
## Market Overview
|
||||
|
||||
Global [smartphone shipments](metric_name) reached [1.2 billion units](metric_value, origin=1200000000) in [2024](time_desc), showing a [modest decline of 2.1%](ratio_value, origin=-0.021, assessment="negative") year-over-year.
|
||||
|
||||
The **premium segment** (devices over $800) showed *remarkable* [resilience](trend_desc, assessment="positive"), growing by [5.8%](ratio_value, origin=0.058, assessment="positive"). [Average selling price](other_metric_value) was [$420](metric_value, origin=420, unit="USD").
|
||||
|
||||
## Key Findings
|
||||
|
||||
1. [Asia-Pacific](dim_value) remains the __largest market__
|
||||
2. [Premium devices](dim_value) showed **strong growth**
|
||||
3. Budget segment faced *headwinds*
|
||||
|
||||
## Regional Breakdown
|
||||
|
||||
### Asia-Pacific
|
||||
|
||||
[Asia-Pacific](dim_value) remains the largest market with [680 million units](metric_value, origin=680000000) shipped, though this represents a [decline of 180 million units](delta_value, origin=-180000000, assessment="negative") from the previous year.
|
||||
|
||||
Key markets:
|
||||
- [China](dim_value): [320M units](metric_value, origin=320000000) - down [8.5%](ratio_value, origin=-0.085, assessment="negative"), [ranked 1st](rank, detail=[320, 180, 90, 65, 45]) globally, accounting for [47%](contribute_ratio, origin=0.47, assessment="positive") of regional sales
|
||||
- [India](dim_value): [180M units](metric_value, origin=180000000) - up [12.3%](ratio_value, origin=0.123, assessment="positive"), [ranked 2nd](rank, detail=[320, 180, 90, 65, 45])
|
||||
- [Southeast Asia](dim_value): [180M units](metric_value, origin=180000000) - [stable](trend_desc, assessment="equal")
|
||||
|
||||
For detailed methodology, visit [our research page](https://example.com/methodology).
|
||||
```
|
||||
|
||||
### 6. Render the Visualization
|
||||
---
|
||||
|
||||
Once you have the JSON schema, create an HTML file that uses the T8 library to render the narrative text:
|
||||
## Using T8 in HTML, React, and Vue
|
||||
|
||||
### Using in HTML (via CDN)
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Narrative Text Visualization</title>
|
||||
<script src="https://unpkg.com/@antv/t8/dist/t8.min.js"></script>
|
||||
<style>
|
||||
#container {
|
||||
max-width: 800px;
|
||||
margin: 40px auto;
|
||||
padding: 20px;
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
|
||||
}
|
||||
</style>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>T8 Narrative Text</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="container"></div>
|
||||
<script>
|
||||
// The T8 schema generated above
|
||||
const schema = {
|
||||
// ... your schema here
|
||||
};
|
||||
<div id="container"></div>
|
||||
|
||||
// Instantiate T8
|
||||
const text = new T8.Text({
|
||||
container: 'container',
|
||||
});
|
||||
<!-- Import T8 from unpkg CDN -->
|
||||
<script src="https://unpkg.com/@antv/t8/dist/t8.min.js"></script>
|
||||
|
||||
<script>
|
||||
// T8 is available as a global variable
|
||||
const { Text } = window.T8;
|
||||
|
||||
// Specify schema and theme
|
||||
text.schema(schema).theme('light');
|
||||
// Initialize T8 instance
|
||||
const text = new Text(document.getElementById('container'));
|
||||
|
||||
// Render visualization
|
||||
text.render();
|
||||
</script>
|
||||
// Render narrative text using T8 Syntax
|
||||
const narrativeText = `
|
||||
# Sales Report
|
||||
|
||||
This quarter, [bookings](metric_name) are higher than usual. They are [¥348k](metric_value, origin=348.12).
|
||||
|
||||
[Bookings](metric_name) are up [¥180.3k](delta_value, assessment="positive") relative to the same time last quarter.
|
||||
`;
|
||||
|
||||
text.theme('light').render(narrativeText);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
### 7. Output Guidelines
|
||||
**Installation:**
|
||||
```bash
|
||||
npm install @antv/t8
|
||||
# or
|
||||
yarn add @antv/t8
|
||||
```
|
||||
|
||||
- The article should be at least 800 Chinese characters or equivalent in other languages
|
||||
- Structure should be clear with natural paragraph transitions
|
||||
- Provide meaningful data interpretation, not just numbers
|
||||
- Use professional, objective language
|
||||
- Output only the JSON schema in plain text (no markdown code blocks)
|
||||
- Omit the `definitions` section in final output
|
||||
### Using in React
|
||||
|
||||
## Best Practices
|
||||
```tsx
|
||||
import { Text } from '@antv/t8';
|
||||
import { useEffect, useRef } from 'react';
|
||||
|
||||
1. **Entity Metadata**: Always add these optional fields when possible:
|
||||
- `origin`: The exact numerical value (e.g., for "146 million units", origin is `146000000`)
|
||||
- `assessment`: Growth trend (`'positive'` | `'negative'` | `'equal'`)
|
||||
- `detail`: Supplementary data array for trends (e.g., `[2,3,4,1,7]`)
|
||||
function T8Component() {
|
||||
const containerRef = useRef<HTMLDivElement>(null);
|
||||
|
||||
2. **Entity Usage**: Maximize entity labeling for:
|
||||
- Metrics and values
|
||||
- Time references
|
||||
- Dimensional identifiers
|
||||
- Trends and changes
|
||||
- Proportions and ratios
|
||||
useEffect(() => {
|
||||
if (!containerRef.current) return;
|
||||
|
||||
3. **Structure**:
|
||||
- Use headings to organize content
|
||||
- Group related information in sections
|
||||
- Use bullets for lists and key points
|
||||
- Maintain logical flow between paragraphs
|
||||
// Initialize T8 instance
|
||||
const text = new Text(containerRef.current);
|
||||
|
||||
4. **Data Quality**:
|
||||
- Always cite authentic sources
|
||||
- Use specific, verifiable numbers
|
||||
- Provide context for metrics
|
||||
- Include time references
|
||||
- Note data sources where appropriate
|
||||
// Render narrative text using T8 Syntax
|
||||
const narrativeText = `
|
||||
# Sales Report
|
||||
|
||||
## Example Output
|
||||
This quarter, [bookings](metric_name) are higher than usual. They are [¥348k](metric_value, origin=348.12).
|
||||
|
||||
A complete example of T8 schema can be found in the T8 repository. The rendered output provides:
|
||||
[Bookings](metric_name) are up [¥180.3k](delta_value, assessment="positive") relative to the same time last quarter.
|
||||
`;
|
||||
|
||||
text.theme('light').render(narrativeText);
|
||||
|
||||
// Cleanup on unmount
|
||||
return () => {
|
||||
text.unmount();
|
||||
};
|
||||
}, []);
|
||||
|
||||
return <div ref={containerRef} />;
|
||||
}
|
||||
|
||||
export default T8Component;
|
||||
```
|
||||
|
||||
### Using in Vue 3
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<div ref="containerRef"></div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { Text } from '@antv/t8';
|
||||
import { ref, onMounted, onBeforeUnmount } from 'vue';
|
||||
|
||||
const containerRef = ref<HTMLDivElement>();
|
||||
let textInstance: Text | null = null;
|
||||
|
||||
onMounted(() => {
|
||||
if (!containerRef.value) return;
|
||||
|
||||
// Initialize T8 instance
|
||||
textInstance = new Text(containerRef.value);
|
||||
|
||||
// Render narrative text using T8 Syntax
|
||||
const narrativeText = `
|
||||
# Sales Report
|
||||
|
||||
This quarter, [bookings](metric_name) are higher than usual. They are [¥348k](metric_value, origin=348.12).
|
||||
|
||||
[Bookings](metric_name) are up [¥180.3k](delta_value, assessment="positive") relative to the same time last quarter.
|
||||
`;
|
||||
|
||||
textInstance.theme('light').render(narrativeText);
|
||||
});
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
if (textInstance) {
|
||||
textInstance.unmount();
|
||||
}
|
||||
});
|
||||
</script>
|
||||
```
|
||||
|
||||
### Using in Vue 2
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<div ref="container"></div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Text } from '@antv/t8';
|
||||
|
||||
export default {
|
||||
name: 'T8Component',
|
||||
data() {
|
||||
return {
|
||||
textInstance: null,
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
// Initialize T8 instance
|
||||
this.textInstance = new Text(this.$refs.container);
|
||||
|
||||
// Render narrative text using T8 Syntax
|
||||
const narrativeText = `
|
||||
# Sales Report
|
||||
|
||||
This quarter, [bookings](metric_name) are higher than usual. They are [¥348k](metric_value, origin=348.12).
|
||||
|
||||
[Bookings](metric_name) are up [¥180.3k](delta_value, assessment="positive") relative to the same time last quarter.
|
||||
`;
|
||||
|
||||
this.textInstance.theme('light').render(narrativeText);
|
||||
},
|
||||
beforeDestroy() {
|
||||
if (this.textInstance) {
|
||||
this.textInstance.unmount();
|
||||
}
|
||||
},
|
||||
};
|
||||
</script>
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Writing Guidelines and Best Practices
|
||||
|
||||
### Content Requirements
|
||||
|
||||
1. **Minimum Length:** No less than 800 words (adjust based on data complexity)
|
||||
2. **Structure:** Clear hierarchy with logical flow between sections
|
||||
3. **Analysis:** Don't just list numbers - explain their significance and context
|
||||
4. **Tone:** Natural, fluent, objective, and professional
|
||||
5. **Entity Usage:** Annotate ALL meaningful data points - metrics, values, trends, times, changes, percentages
|
||||
|
||||
### Entity Annotation Best Practices
|
||||
|
||||
1. **Be Comprehensive:** Mark all quantitative data, not just major figures
|
||||
2. **Use Appropriate Types:** Choose the entity type that best describes the semantic meaning
|
||||
3. **Add Metadata:** Include `origin`, `assessment`, and other relevant fields when applicable
|
||||
4. **Natural Flow:** Entities should blend seamlessly into readable prose
|
||||
|
||||
### What to Annotate
|
||||
|
||||
✅ **DO annotate:**
|
||||
- All numeric values (revenue, counts, measurements)
|
||||
- All percentages (changes, contributions, proportions)
|
||||
- Metric names and KPIs
|
||||
- Time periods
|
||||
- Geographic regions and categories
|
||||
- Trend descriptions
|
||||
- Comparisons and changes
|
||||
|
||||
❌ **DON'T annotate:**
|
||||
- Generic text without specific data meaning
|
||||
- Connecting phrases and transitions
|
||||
- Context that doesn't represent measurable concepts
|
||||
|
||||
---
|
||||
|
||||
## Output Format
|
||||
|
||||
When generating T8 Syntax content for the user:
|
||||
1. Output the T8 Syntax content directly without wrapping in code blocks
|
||||
2. Provide the frontend code (HTML/React/Vue) based on user preference
|
||||
3. Ensure all entities are properly annotated with appropriate metadata
|
||||
4. Verify that content meets minimum length and quality requirements
|
||||
|
||||
The rendered output provides:
|
||||
- Rich semantic markup for data entities
|
||||
- Interactive entity highlighting
|
||||
- Clear visual hierarchy
|
||||
- Professional report-style formatting
|
||||
- Responsive design for all devices
|
||||
|
||||
## Reference Material
|
||||
---
|
||||
|
||||
Detailed specifications are located in the `references/` directory:
|
||||
- `prompt.md`: Complete prompt template for LLM generation
|
||||
- `schema.json`: Full JSON Schema definition with all types
|
||||
## Reference Links
|
||||
|
||||
These references are based on the official AntV T8 repository and should be consulted for accurate implementation details.
|
||||
- T8 GitHub Repository: https://github.com/antvis/T8
|
||||
- T8 Documentation: https://github.com/antvis/T8/blob/main/site/en/tutorial/quick-start.md
|
||||
- T8 Syntax Reference: https://github.com/antvis/T8/blob/main/prompt.md
|
||||
|
||||
@@ -1,76 +0,0 @@
|
||||
You are an experienced data analyst who is good at writing structured, informative articles based on a given topic and real data.
|
||||
|
||||
---
|
||||
|
||||
## Mission Objective
|
||||
|
||||
Please generate a structured article based on the JSON Schema specification I provided, combined with the given topic content or specific data. The content of the article must strictly follow the output format and entity labeling requirements.
|
||||
|
||||
---
|
||||
|
||||
## Data Requirements
|
||||
|
||||
- All data must be from **publicly authentic data sources**, including but not limited to:
|
||||
- Official announcement/financial report.
|
||||
- Authoritative financial and technological media reports (such as Reuters, Bloomberg, Caixin.com, TechCrunch, etc.).
|
||||
- Reports from well-known industry research institutions (such as IDC, Canalys, Counterpoint Research, etc.).
|
||||
- **The use of any fictional, AI guessing, simulated or unproven non-public data is strictly prohibited. **
|
||||
- The data must be ** specific numbers** (for example, "146 million units", "7058 units"), rather than vague approximate numbers (such as "millions", "dozens").
|
||||
|
||||
---
|
||||
|
||||
## Output format requirements
|
||||
|
||||
Please write the article strictly according to the uploaded JSON Schema structure. The following is a brief explanation of JSON Schema:
|
||||
|
||||
- **Top Structure**: The article should contain a root object containing an array of `headline` and `sections`.
|
||||
- **Structural Elements**: Inside the `sections` array, use elements such as `paragraph`, `phrase` to construct the article content.
|
||||
|
||||
- `section`: represents a main chapter of the article and should contain an array of `paragraphs`.
|
||||
- `paragraph`: Represents a paragraph containing an array of `phrases` and the current `paragraph` `type`, whose `phrases` array consists of `text` and `entity` elements.
|
||||
- `bullet`: used to represent the entire list.
|
||||
- `bullet-item`: used to express an item in the list.
|
||||
- `text`: Used for normal text content.
|
||||
- `entity`: Used to annotate phrases or values with specific meanings, and its `metadata` contains `entity_type` and `value`.
|
||||
|
||||
---
|
||||
|
||||
## `entity` Writing specifications
|
||||
|
||||
### Entity label type (`entity_type` list)
|
||||
|
||||
Below is a list of types supported by entity phrases. Please be sure to strictly mark entities according to the following table:
|
||||
|
||||
| Type | Description | Example |
|
||||
| -------------------- | -------------------------- | ------------------------------------- |
|
||||
| `metric_name` | Indicator name | "Shipment", "Growth Rate" |
|
||||
| `metric_value` | Main indicator value | "146 million units", "120 factories" |
|
||||
| `other_metric_value` | Other metric values | "$19.2 billion" |
|
||||
| `delta_value` | Difference | "+120" |
|
||||
| `ratio_value` | Rate | "+8.4%", "9%" |
|
||||
| `contribute_ratio` | Contribution | "40%" |
|
||||
| `trend_desc` | Trend Description | "Continuously Rising", "Stable" |
|
||||
| `dim_value` | Dimensional identification | "India", "Jiangsu", "Overseas Market" |
|
||||
| `time_desc` | Time stamp | "Q3 2024", "all year" |
|
||||
| `proportion` | Proportion description | "30%" |
|
||||
|
||||
When possible, it is required to use as much key information in the sentence as possible to replace ordinary `text` (such as indicators, values, time, numbers, etc.), to ensure the diversity of generated text and improve readability. (In particular, it is necessary to increase the frequency of usage of the phrases `delta_value`, `ratio_value`, `proportion`).
|
||||
|
||||
### `entity` optional field (highly recommended)
|
||||
|
||||
Try to add the following fields for each `entity` to enrich the structure and information:
|
||||
|
||||
- `origin`: The exact numerical representation of the data itself in the original source (for example, for "146 million units", its original value might be `146 million units", and for "13.9%", its original value might be `0.139221`).
|
||||
- `assessment`: Based on official data, judge the growth or changing trend of this indicator (only `'positive'` | `'negative'` | `'equal'` | `'neutral'`).
|
||||
- `detail`: Supplementary data description of entity content (for example, in the face of `trend_desc`, `detail` should be an array of specific data, such as `[2,3,4,1,7]`).
|
||||
|
||||
---
|
||||
|
||||
## Other Requirements
|
||||
|
||||
- The total number of words in the article should be no less than 800 Chinese characters (please adjust the specific number of words according to the actual amount of information).
|
||||
- The content of the article must be clear and clear in structure to ensure a natural transition between paragraphs and chapters.
|
||||
- Provide the most appropriate explanation and trend analysis of the data, not just listing numbers, but also reflecting the meaning behind the data.
|
||||
- The language of the article should be natural, fluent, objective and professional, and avoid colloquialism, marketing colors, and unnecessary physical or numerical stacking.
|
||||
- In the final output JSON, the `definitions` part can be omitted directly, I only need the body JSON content.
|
||||
- In the final output, no unnecessary description and fast wrapping of `markdown` code is needed(such as \```json{}\```), I just want JSON Schema in plain text.
|
||||
@@ -1,400 +0,0 @@
|
||||
{
|
||||
"$ref": "#/definitions/NarrativeTextSpec",
|
||||
"$schema": "http://json-schema.org/draft-07/schema#",
|
||||
"definitions": {
|
||||
"BulletItemSpec": {
|
||||
"additionalProperties": false,
|
||||
"properties": {
|
||||
"className": {
|
||||
"type": "string"
|
||||
},
|
||||
"key": {
|
||||
"type": "string"
|
||||
},
|
||||
"phrases": {
|
||||
"items": {
|
||||
"$ref": "#/definitions/PhraseSpec"
|
||||
},
|
||||
"type": "array"
|
||||
},
|
||||
"styles": {
|
||||
"type": "object"
|
||||
},
|
||||
"subBullet": {
|
||||
"$ref": "#/definitions/BulletsParagraphSpec"
|
||||
},
|
||||
"type": {
|
||||
"const": "bullet-item",
|
||||
"type": "string"
|
||||
}
|
||||
},
|
||||
"required": ["phrases", "type"],
|
||||
"type": "object"
|
||||
},
|
||||
"BulletsParagraphSpec": {
|
||||
"additionalProperties": false,
|
||||
"properties": {
|
||||
"bullets": {
|
||||
"items": {
|
||||
"$ref": "#/definitions/BulletItemSpec"
|
||||
},
|
||||
"type": "array"
|
||||
},
|
||||
"className": {
|
||||
"type": "string"
|
||||
},
|
||||
"isOrder": {
|
||||
"type": "boolean"
|
||||
},
|
||||
"key": {
|
||||
"type": "string"
|
||||
},
|
||||
"styles": {
|
||||
"type": "object"
|
||||
},
|
||||
"type": {
|
||||
"const": "bullets",
|
||||
"type": "string"
|
||||
}
|
||||
},
|
||||
"required": ["bullets", "isOrder", "type"],
|
||||
"type": "object"
|
||||
},
|
||||
"CustomBlockElement": {
|
||||
"description": "basic block element structure, used for extends",
|
||||
"properties": {
|
||||
"className": {
|
||||
"type": "string"
|
||||
},
|
||||
"customType": {
|
||||
"type": "string"
|
||||
},
|
||||
"key": {
|
||||
"type": "string"
|
||||
},
|
||||
"styles": {
|
||||
"type": "object"
|
||||
}
|
||||
},
|
||||
"required": ["customType"],
|
||||
"type": "object"
|
||||
},
|
||||
"CustomMetaData": {
|
||||
"additionalProperties": {},
|
||||
"description": "custom phrase metadata",
|
||||
"properties": {
|
||||
"customType": {
|
||||
"type": "string"
|
||||
}
|
||||
},
|
||||
"required": ["customType"],
|
||||
"type": "object"
|
||||
},
|
||||
"CustomPhraseSpec<CustomMetaData>": {
|
||||
"additionalProperties": false,
|
||||
"properties": {
|
||||
"className": {
|
||||
"type": "string"
|
||||
},
|
||||
"key": {
|
||||
"type": "string"
|
||||
},
|
||||
"metadata": {
|
||||
"$ref": "#/definitions/CustomMetaData"
|
||||
},
|
||||
"styles": {
|
||||
"type": "object"
|
||||
},
|
||||
"type": {
|
||||
"const": "custom",
|
||||
"type": "string"
|
||||
},
|
||||
"value": {
|
||||
"type": "string"
|
||||
}
|
||||
},
|
||||
"required": ["type"],
|
||||
"type": "object"
|
||||
},
|
||||
"EntityMetaData": {
|
||||
"additionalProperties": false,
|
||||
"properties": {
|
||||
"assessment": {
|
||||
"$ref": "#/definitions/ValueAssessment",
|
||||
"description": "assessment up or down, used for derived value 衍生指标评估参数,指定上涨或者下跌"
|
||||
},
|
||||
"detail": {
|
||||
"description": "detail data, 明细数据,用于弹框展示"
|
||||
},
|
||||
"entityType": {
|
||||
"$ref": "#/definitions/EntityType",
|
||||
"description": "entity type, 实体类型标记"
|
||||
},
|
||||
"origin": {
|
||||
"description": "original data, 原始数据",
|
||||
"type": "number"
|
||||
},
|
||||
"sourceId": {
|
||||
"description": "source id of the variable, to access the variable info from variableSourceMap",
|
||||
"type": "string"
|
||||
}
|
||||
},
|
||||
"required": ["entityType"],
|
||||
"type": "object"
|
||||
},
|
||||
"EntityPhraseSpec": {
|
||||
"additionalProperties": false,
|
||||
"properties": {
|
||||
"className": {
|
||||
"type": "string"
|
||||
},
|
||||
"key": {
|
||||
"type": "string"
|
||||
},
|
||||
"metadata": {
|
||||
"$ref": "#/definitions/EntityMetaData"
|
||||
},
|
||||
"styles": {
|
||||
"type": "object"
|
||||
},
|
||||
"type": {
|
||||
"const": "entity",
|
||||
"type": "string"
|
||||
},
|
||||
"value": {
|
||||
"type": "string"
|
||||
}
|
||||
},
|
||||
"required": ["type"],
|
||||
"type": "object"
|
||||
},
|
||||
"EntityType": {
|
||||
"enum": [
|
||||
"metric_name",
|
||||
"metric_value",
|
||||
"other_metric_value",
|
||||
"contribute_ratio",
|
||||
"delta_value",
|
||||
"ratio_value",
|
||||
"trend_desc",
|
||||
"dim_value",
|
||||
"time_desc",
|
||||
"proportion"
|
||||
],
|
||||
"type": "string"
|
||||
},
|
||||
"HeadingParagraphSpec": {
|
||||
"additionalProperties": false,
|
||||
"properties": {
|
||||
"className": {
|
||||
"type": "string"
|
||||
},
|
||||
"key": {
|
||||
"type": "string"
|
||||
},
|
||||
"phrases": {
|
||||
"items": {
|
||||
"$ref": "#/definitions/PhraseSpec"
|
||||
},
|
||||
"type": "array"
|
||||
},
|
||||
"styles": {
|
||||
"type": "object"
|
||||
},
|
||||
"type": {
|
||||
"enum": ["heading1", "heading2", "heading3", "heading4", "heading5", "heading6"],
|
||||
"type": "string"
|
||||
}
|
||||
},
|
||||
"required": ["phrases", "type"],
|
||||
"type": "object"
|
||||
},
|
||||
"HeadlineSpec": {
|
||||
"additionalProperties": false,
|
||||
"properties": {
|
||||
"className": {
|
||||
"type": "string"
|
||||
},
|
||||
"key": {
|
||||
"type": "string"
|
||||
},
|
||||
"phrases": {
|
||||
"items": {
|
||||
"$ref": "#/definitions/PhraseSpec"
|
||||
},
|
||||
"type": "array"
|
||||
},
|
||||
"styles": {
|
||||
"type": "object"
|
||||
},
|
||||
"type": {
|
||||
"const": "headline",
|
||||
"type": "string"
|
||||
}
|
||||
},
|
||||
"required": ["phrases", "type"],
|
||||
"type": "object"
|
||||
},
|
||||
"NarrativeTextSpec": {
|
||||
"additionalProperties": false,
|
||||
"properties": {
|
||||
"className": {
|
||||
"type": "string"
|
||||
},
|
||||
"headline": {
|
||||
"$ref": "#/definitions/HeadlineSpec"
|
||||
},
|
||||
"key": {
|
||||
"type": "string"
|
||||
},
|
||||
"sections": {
|
||||
"items": {
|
||||
"$ref": "#/definitions/SectionSpec"
|
||||
},
|
||||
"type": "array"
|
||||
},
|
||||
"styles": {
|
||||
"type": "object"
|
||||
}
|
||||
},
|
||||
"type": "object"
|
||||
},
|
||||
"ParagraphSpec": {
|
||||
"anyOf": [
|
||||
{
|
||||
"$ref": "#/definitions/HeadingParagraphSpec"
|
||||
},
|
||||
{
|
||||
"$ref": "#/definitions/TextParagraphSpec"
|
||||
},
|
||||
{
|
||||
"$ref": "#/definitions/BulletsParagraphSpec"
|
||||
},
|
||||
{
|
||||
"$ref": "#/definitions/CustomBlockElement"
|
||||
}
|
||||
]
|
||||
},
|
||||
"PhraseSpec": {
|
||||
"anyOf": [
|
||||
{
|
||||
"$ref": "#/definitions/TextPhraseSpec"
|
||||
},
|
||||
{
|
||||
"$ref": "#/definitions/EntityPhraseSpec"
|
||||
},
|
||||
{
|
||||
"$ref": "#/definitions/CustomPhraseSpec<CustomMetaData>"
|
||||
}
|
||||
]
|
||||
},
|
||||
"SectionSpec": {
|
||||
"anyOf": [
|
||||
{
|
||||
"additionalProperties": false,
|
||||
"properties": {
|
||||
"className": {
|
||||
"type": "string"
|
||||
},
|
||||
"key": {
|
||||
"type": "string"
|
||||
},
|
||||
"paragraphs": {
|
||||
"items": {
|
||||
"$ref": "#/definitions/ParagraphSpec"
|
||||
},
|
||||
"type": "array"
|
||||
},
|
||||
"styles": {
|
||||
"type": "object"
|
||||
}
|
||||
},
|
||||
"type": "object"
|
||||
},
|
||||
{
|
||||
"properties": {
|
||||
"className": {
|
||||
"type": "string"
|
||||
},
|
||||
"customType": {
|
||||
"type": "string"
|
||||
},
|
||||
"key": {
|
||||
"type": "string"
|
||||
},
|
||||
"styles": {
|
||||
"type": "object"
|
||||
}
|
||||
},
|
||||
"required": ["customType"],
|
||||
"type": "object"
|
||||
}
|
||||
]
|
||||
},
|
||||
"TextParagraphSpec": {
|
||||
"additionalProperties": false,
|
||||
"properties": {
|
||||
"className": {
|
||||
"type": "string"
|
||||
},
|
||||
"key": {
|
||||
"type": "string"
|
||||
},
|
||||
"phrases": {
|
||||
"items": {
|
||||
"$ref": "#/definitions/PhraseSpec"
|
||||
},
|
||||
"type": "array"
|
||||
},
|
||||
"styles": {
|
||||
"type": "object"
|
||||
},
|
||||
"type": {
|
||||
"const": "normal",
|
||||
"type": "string"
|
||||
}
|
||||
},
|
||||
"required": ["phrases", "type"],
|
||||
"type": "object"
|
||||
},
|
||||
"TextPhraseSpec": {
|
||||
"additionalProperties": false,
|
||||
"properties": {
|
||||
"bold": {
|
||||
"type": "boolean"
|
||||
},
|
||||
"className": {
|
||||
"type": "string"
|
||||
},
|
||||
"italic": {
|
||||
"type": "boolean"
|
||||
},
|
||||
"key": {
|
||||
"type": "string"
|
||||
},
|
||||
"styles": {
|
||||
"type": "object"
|
||||
},
|
||||
"type": {
|
||||
"const": "text",
|
||||
"type": "string"
|
||||
},
|
||||
"underline": {
|
||||
"type": "boolean"
|
||||
},
|
||||
"url": {
|
||||
"type": "string"
|
||||
},
|
||||
"value": {
|
||||
"type": "string"
|
||||
}
|
||||
},
|
||||
"required": ["type", "value"],
|
||||
"type": "object"
|
||||
},
|
||||
"ValueAssessment": {
|
||||
"enum": ["positive", "negative", "equal"],
|
||||
"type": "string"
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user