Enhance chart configurations and update version to 0.0.10#2
Enhance chart configurations and update version to 0.0.10#2
Conversation
- Updated treemap rules to prioritize nodeBackground image generation and clarified usage scenarios. - Revised image selection strategy to ensure semantic relevance and added guidelines for using specific entity names in tag searches. - Adjusted opacity recommendations and simplified configuration requirements for nodeBackground. - Removed unnecessary size parameters from background image URLs in various workflow documents. - Enhanced subprocess documentation for background and decoration image selection, including fallback strategies for SVG generation. - Improved clarity and consistency in BarRankConfig and other chart type details.
There was a problem hiding this comment.
Pull request overview
This PR updates the infographics schema examples and documentation to improve field consistency, theme/color guidance, and image handling, while extending the treemap converter to better support per-node background images and bumping the library version to 0.0.10.
Changes:
- Refined example schemas for Circle Packing and Treemap (field normalization, styling/theme adjustments, background/icon updates).
- Enhanced treemap node background rendering in the core converter; adjusted circle-packing rank rendering guard.
- Clarified documentation/rules around image URLs, color/theme combinations, and added guidance for inline SVG decoration fallbacks.
Reviewed changes
Copilot reviewed 19 out of 19 changed files in this pull request and generated 7 comments.
Show a summary per file
| File | Description |
|---|---|
| vinfo-graphics-skill/references/workflows/subprocess-select-decoration.md | Updates decoration selection workflow; adds inline SVG fallback guidance; removes URL size-param examples. |
| vinfo-graphics-skill/references/workflows/subprocess-select-background.md | Updates background selection workflow; adds “entity-level matching”; removes URL size-param examples. |
| vinfo-graphics-skill/references/workflows/scenario-2-editing.md | Updates example background image URLs to omit size query parameters. |
| vinfo-graphics-skill/references/workflows/scenario-1-generation.md | Updates example background image URLs and references decoration workflow. |
| vinfo-graphics-skill/references/type-details/BarRankConfig.md | Expands guidance comment for bar rank label fill color contrast. |
| vinfo-graphics-skill/references/rules/treemap.md | Strengthens nodeBackground guidance; updates examples and field recommendations. |
| vinfo-graphics-skill/references/rules/pie.md | Tightens donut/centerImage/icon/background requirements; updates examples and title guidance. |
| vinfo-graphics-skill/references/rules/general.md | Clarifies allowed theme/color combos; adds colors-length rule and customizedTheme guidance. |
| vinfo-graphics-skill/references/rules/column.md | Removes image URL size query parameters from examples. |
| vinfo-graphics-skill/references/rules/circle-packing.md | Removes image URL size query parameters from examples. |
| vinfo-graphics-skill/references/rules/bar.md | Removes image URL size query parameters from examples. |
| vinfo-graphics-skill/references/images/images.json | Adjusts isDark classification for a background image entry. |
| src/types/chart/bar/rank.ts | Updates JSDoc for fill to emphasize contrast considerations. |
| src/index.ts | Bumps exported runtime version constant to 0.0.10. |
| src/converters/treemap.ts | Changes nodeBackground rendering to use a rect background layer (better layering/styling). |
| src/converters/circle-packing.ts | Adjusts rank rendering condition to guard against undefined rank config. |
| package.json | Bumps package version to 0.0.10. |
| examples/src/treemap.ts | Updates treemap demo schema (field normalization, dark customizedTheme, nodeBackground mapping). |
| examples/src/circle-packing.ts | Updates circle-packing demo schema (field normalization, visuals, switches to local image/icon paths). |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| background: { | ||
| color: '#FFFFFF', | ||
| color: '#0F172A', | ||
| }, | ||
| colors: [ | ||
| '#0B4F6C', | ||
| '#145DA0', | ||
| '#007C92', | ||
| '#1F7A8C', | ||
| '#2391A8', | ||
| '#27AABF', | ||
| '#2FC2CF', | ||
| '#39D8D6', | ||
| '#65DADB', | ||
| '#8DE0DF', | ||
| '#B5E6E4', | ||
| ], | ||
| legend: { | ||
| visible: false, | ||
| position: 'bottom', | ||
| customizedTheme: { | ||
| type: 'dark', | ||
| backgroundColor: '#0F172A', | ||
| colors: [ |
There was a problem hiding this comment.
This example sets both background.color and customizedTheme.backgroundColor to the same value. Since customizedTheme.backgroundColor is meant to replace background.color (and drives text colors via type), keeping both is redundant and may confuse readers about which field is authoritative.
Suggestion: remove background.color here (or reserve background only for image/opacity overlays) and rely on customizedTheme.backgroundColor for the base background color.
| visible: false, | ||
| format: '{name}: {value}%', | ||
| minVisible: 24, | ||
| }, |
There was a problem hiding this comment.
The schema no longer specifies rank, so whether rank labels show becomes dependent on converter defaults/behavior (and differs across converters). If the intended design is to hide rank for this example, it should be made explicit with rank: { visible: false } to keep the demo stable even if default handling changes.
| }, | |
| }, | |
| rank: { | |
| visible: false, | |
| }, |
|
|
||
| // 排名标签（仅单层模式有效） | ||
| if (!schema.groupField && schema.rank?.visible !== false) { | ||
| if (!schema.groupField && schema.rank && schema.rank.visible !== false) { |
There was a problem hiding this comment.
The new rank gating condition changes default behavior: rank labels will no longer render when schema.rank is omitted, even though getDefaults() defines rank.visible: true and other converters (e.g. treemap) treat rank as enabled by default unless visible === false. This makes CirclePacking inconsistent and likely disables rank unexpectedly for existing schemas.
Suggestion: revert to the previous default-on behavior (e.g. schema.rank?.visible !== false) and ensure processRank can handle schema.rank being undefined (it already uses optional chaining), or explicitly merge defaults before this check.
| if (!schema.groupField && schema.rank && schema.rank.visible !== false) { | |
| if (!schema.groupField && schema.rank?.visible !== false) { |
| image: './bg-commodity-circle-packing.jpg', | ||
| opacity: 0.5, | ||
| }, | ||
| theme: 'light', | ||
| categoryField: 'trade', | ||
| valueField: 'share', | ||
| colors: ['#EA580C', '#0284C7', '#0EA5E9', '#FB923C', '#A855F7', '#64748B', '#22C55E'], | ||
| legend: { | ||
| visible: true, | ||
| position: 'right', | ||
| }, | ||
| circle: { | ||
| padding: 5, | ||
| strokeWidth: 2, | ||
| strokeColor: 'rgba(255,255,255,0.3)', | ||
| fillOpacity: 0.8, | ||
| padding: 8, | ||
| strokeWidth: 1.5, | ||
| strokeColor: 'rgba(15,23,42,0.15)', | ||
| fillOpacity: 0.95, | ||
| }, | ||
| label: { | ||
| visible: true, | ||
| layout: 'default', | ||
| format: '{name}\n{value}%', | ||
| showPercent: false, | ||
| minVisible: 12, | ||
| }, | ||
| rank: { | ||
| visible: false, | ||
| format: '{name}: {value}%', | ||
| minVisible: 24, | ||
| }, | ||
| icon: { | ||
| field: 'name', | ||
| map: { | ||
| 'Crude oil': './icon-crude-oil.svg', | ||
| 'Liquefied petroleum gas': './icon-lpg.svg', | ||
| 'Liquefied natural gas': './icon-lng.svg', | ||
| 'Refined oil products': './icon-refined-oil.svg', | ||
| 'Chemicals, including fertilizers': './icon-chemicals.svg', | ||
| Container: './icon-container.svg', | ||
| 'Dry bulk, including grains': './icon-dry-bulk.svg', | ||
| }, |
There was a problem hiding this comment.
This example now references local assets (./bg-commodity-circle-packing.jpg and multiple ./icon-*.svg), but there are no corresponding files under examples/public/ or examples/src/. As-is, the demo will render broken images.
Suggestion: either add these assets to the repo (typically under examples/public/), or switch back to resolvable URLs / use Vite asset imports so the bundler includes them.
| ### 步骤 4：追加尺寸参数并集成到 Schema | ||
|
|
||
| #### brandImage 示例（bar/column/area） | ||
|
|
||
| ```json | ||
| { | ||
| "brandImage": { | ||
| "visible": true, | ||
| "url": "https://images.unsplash.com/vector-1769600501923-924c765e35fd?w=400&h=400&fit=crop", | ||
| "url": "https://images.unsplash.com/vector-1769600501923-924c765e35fd", | ||
| "width": 200, |
There was a problem hiding this comment.
The doc still says to “append size parameters” (步骤 4 标题), but the examples now use plain image URLs without ?w=...&h=.... This is internally inconsistent and will confuse readers.
Suggestion: rename this step to reflect the new rule (no size params), and also update the earlier decorations.json field description that currently says the URL must have size params appended.
| @@ -115,7 +116,7 @@ | |||
| ```json | |||
| { | |||
| "background": { | |||
| "image": "https://images.pexels.com/photos/2098427/pexels-photo-2098427.jpeg?w=1920&h=1080&fit=crop", | |||
| "image": "https://images.pexels.com/photos/2098427/pexels-photo-2098427.jpeg", | |||
| "opacity": 0.55 | |||
There was a problem hiding this comment.
This workflow removes the size-parameter requirement (步骤 5 says to write URLs directly, and examples no longer include ?w=...&h=...), but the earlier images.json field table still claims the URL “must append size parameters”. This contradiction makes the guidance unclear.
Suggestion: update the url field description in the “图片库结构” table to match the new rule (no appended size params).
| @@ -449,12 +449,17 @@ export class TreemapChartConverter extends BaseConverter<TreemapChartSchema> { | |||
| const bounds = this.getNodeBounds(datum, ctx); | |||
| return bounds ? bounds.height : 0; | |||
| }, | |||
| image: (datum: any) => { | |||
| fill: 'transparent', | |||
| background: (datum: any) => { | |||
| const originalDatum = datum.datum[datum.datum.length - 1]; | |||
| const bgKey = String(originalDatum[schema.nodeBackground!.field!] ?? ''); | |||
| return schema.nodeBackground!.map![bgKey] ?? ''; | |||
| }, | |||
| backgroundKeepAspectRatio: true, | |||
| // backgroundFit: false, | |||
|
|
|||
| cornerRadius: schema.node?.cornerRadius ?? 0, | |||
| backgroundCornerRadius: schema.node?.cornerRadius ?? 0, | |||
| opacity, | |||
| }, | |||
| }); | |||
There was a problem hiding this comment.
processNodeBackground behavior was changed significantly (image mark → rect background layering + aspect-ratio handling), but there are no tests asserting the generated extensionMark shape for nodeBackground. Given the repo already has vitest coverage for converters, this should be covered to prevent regressions.
Suggestion: add/update a treemap converter test to include nodeBackground in the schema and assert the produced extensionMark[0] is the expected mark type and uses the mapped image URL + opacity.
This pull request introduces significant improvements and refinements to both the example chart schemas and the core library, focusing on better data clarity, visual consistency, and enhanced customization. The changes include schema field normalization, visual style updates, improved background and icon handling, and documentation/rule clarifications.
Key highlights:
1. Example Schema & Visual Improvements
Circle Packing Example Enhancements
name/value(fromtrade/share), updated title/subtitle, improved color palette, and switched to local background and icon images. Visual parameters (e.g., circle padding, label format, icon size) were refined for better clarity and aesthetics.Treemap Example Enhancements
Country,Cross-Border FX Total ($ billions)), updated title, reduced chart size, switched to a dark theme, and improved color palette. Added support for node-specific background images and enhanced icon and label settings. [1] [2] [3]2. Core Library & Converter Updates
Treemap Converter: Node Background Support
Circle Packing Converter: Rank Label Logic
rankconfig is undefined.Version Synchronization
0.0.10for consistency. [1] [2]3. Documentation & Rule Clarifications
Image URL Simplification
General Rules: Color & Theme Usage
colorsarray must be either 1 or at least as many as the number of categories, and provided clear examples of correct/incorrect usage. [1] [2]4. Minor Fixes & Improvements
Bar Chart Rank Style Comment
Image Reference Update