@taylorwong/ichartjs 2.0.19 → 2.0.21
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.
- package/CHANGELOG.md +11 -0
- package/README.md +3 -2
- package/docs/agent/coding-agent-integration.md +1 -1
- package/docs/agent/conversational-workflow.md +134 -0
- package/docs/agent/development/2.0-release-readiness.md +1 -1
- package/docs/agent/development/iteration-16.md +70 -0
- package/docs/agent/development/iteration-17.md +55 -0
- package/docs/agent/development/roadmap.md +20 -2
- package/docs/agent/diagram-scenario.md +2 -0
- package/docs/agent/frontend-integration.md +1 -1
- package/docs/agent/runtime-contract.md +3 -1
- package/docs/agent/usage-scenarios.md +5 -1
- package/docs/agent/zh-CN/coding-agent-integration.md +1 -1
- package/docs/agent/zh-CN/conversational-workflow.md +128 -0
- package/docs/agent/zh-CN/diagram-scenario.md +2 -0
- package/docs/agent/zh-CN/frontend-integration.md +1 -1
- package/docs/agent/zh-CN/iteration-17.md +50 -0
- package/docs/agent/zh-CN/runtime-contract.md +3 -1
- package/docs/agent/zh-CN/usage-scenarios.md +5 -1
- package/docs/manifests/capabilities.json +62 -5
- package/package.json +3 -2
- package/skills/ichartjs/SKILL.md +3 -1
- package/src/capabilities.mjs +37 -3
- package/src/index.mjs +11 -7
- package/src/preferences.mjs +24 -1
- package/src/project.mjs +2 -2
- package/src/renderer.mjs +2 -2
- package/src/scene.mjs +5 -0
- package/src/spec.mjs +4 -2
- package/src/validation.mjs +2 -2
- package/types/index.d.ts +6 -4
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,16 @@
|
|
|
1
1
|
# Changelog
|
|
2
2
|
|
|
3
|
+
## 2.0.21 - 2026-10-01
|
|
4
|
+
|
|
5
|
+
- Completed Iteration 17 production trust and Agent reliability hardening with unknown-option diagnostics, effective Spec explanations, unsupported-renderer planning diagnostics, and stable normalization records.
|
|
6
|
+
- Added `agentReliability` capability metadata, npm package-content checks, bilingual production-trust guidance, and release-gate coverage for the ESM, TypeScript, headless, SVG, and Canvas consumer paths.
|
|
7
|
+
|
|
8
|
+
## 2.0.20 - 2026-09-30
|
|
9
|
+
|
|
10
|
+
- Completed Iteration 16 preference precedence, Agent source resolution, conversational workflow guidance, capability discovery, and Gallery acceptance coverage.
|
|
11
|
+
- Replaced Flow start/end polygon approximations with native ellipse geometry across Scene Graph, SVG, Canvas, export, scaling, and hit testing.
|
|
12
|
+
- Synchronized runtime, package, Playground, Skill, documentation, and release-pinned installation references.
|
|
13
|
+
|
|
3
14
|
## 2.0.19 - 2026-09-29
|
|
4
15
|
|
|
5
16
|
- Added Iteration 15 adaptive text fitting for Flow, Architecture, Mindmap, and Swimlane nodes, with inline-first edge labels, diagram-only contrast plates, unified diagnostics, and shared SVG/Canvas behavior.
|
package/README.md
CHANGED
|
@@ -36,6 +36,7 @@ getCapabilities
|
|
|
36
36
|
| Frontend integration | [`docs/agent/frontend-integration.md`](docs/agent/frontend-integration.md) |
|
|
37
37
|
| Visual style and themes | [`docs/agent/theme-guide.md`](docs/agent/theme-guide.md) |
|
|
38
38
|
| Chart and page preferences | [`docs/agent/theme-guide.md`](docs/agent/theme-guide.md#chart-and-page-preferences) |
|
|
39
|
+
| Natural-language chart changes | [`docs/agent/conversational-workflow.md`](docs/agent/conversational-workflow.md) |
|
|
39
40
|
| Official Agent Skill for Codex and WorkBuddy | [`skills/ichartjs/SKILL.md`](skills/ichartjs/SKILL.md) |
|
|
40
41
|
|
|
41
42
|
### Install
|
|
@@ -44,7 +45,7 @@ getCapabilities
|
|
|
44
45
|
npm install @taylorwong/ichartjs@^2
|
|
45
46
|
```
|
|
46
47
|
|
|
47
|
-
As a fallback for environments without npm access, install directly from GitHub: `npm install github:wanghetommy/ichartjs#v2.0.
|
|
48
|
+
As a fallback for environments without npm access, install directly from GitHub: `npm install github:wanghetommy/ichartjs#v2.0.21`.
|
|
48
49
|
|
|
49
50
|
### Optional Agent Skill
|
|
50
51
|
|
|
@@ -66,7 +67,7 @@ For a non-interactive global Codex installation:
|
|
|
66
67
|
npx skills add wanghetommy/ichartjs --skill ichartjs --agent codex --global --yes
|
|
67
68
|
```
|
|
68
69
|
|
|
69
|
-
For a release-pinned installation, use `npx skills add https://github.com/wanghetommy/ichartjs/tree/v2.0.
|
|
70
|
+
For a release-pinned installation, use `npx skills add https://github.com/wanghetommy/ichartjs/tree/v2.0.21/skills/ichartjs --agent codex --global --yes`. WorkBuddy users can import the same tagged `skills/ichartjs` URL through the host's Skill interface; do not assume a `--agent workbuddy` adapter unless the installed CLI declares it. Package consumers can still copy `node_modules/@taylorwong/ichartjs/skills/ichartjs` as a manual fallback. After installation, invoke `$ichartjs` when named Skill invocation is supported, or select `ichartjs` in the host UI.
|
|
70
71
|
|
|
71
72
|
### Agent workflow
|
|
72
73
|
|
|
@@ -33,7 +33,7 @@ Install the official Skill with the standard Agent Skills CLI:
|
|
|
33
33
|
npx skills add wanghetommy/ichartjs --skill ichartjs
|
|
34
34
|
```
|
|
35
35
|
|
|
36
|
-
For global non-interactive Codex setup, append `--agent codex --global --yes`. To pin the released workflow, install `https://github.com/wanghetommy/ichartjs/tree/v2.0.
|
|
36
|
+
For global non-interactive Codex setup, append `--agent codex --global --yes`. To pin the released workflow, install `https://github.com/wanghetommy/ichartjs/tree/v2.0.21/skills/ichartjs`. WorkBuddy can import that tagged directory through its Skill interface; only use a host-specific `--agent` value when the installed CLI declares it.
|
|
37
37
|
|
|
38
38
|
Verify discovery with `npx skills add wanghetommy/ichartjs --list`; the result should include `ichartjs`.
|
|
39
39
|
|
|
@@ -0,0 +1,134 @@
|
|
|
1
|
+
# Conversational Workflow
|
|
2
|
+
|
|
3
|
+
iChart.js does not parse natural-language requests inside the runtime. The host Agent, such as Codex or WorkBuddy, maps the user's request to the public JavaScript contract. The runtime then validates, applies, renders, explains, and exports the result.
|
|
4
|
+
|
|
5
|
+
## Safe Request Loop
|
|
6
|
+
|
|
7
|
+
Use this loop for every conversational change:
|
|
8
|
+
|
|
9
|
+
```text
|
|
10
|
+
read current state
|
|
11
|
+
-> classify the request
|
|
12
|
+
-> build a structured change
|
|
13
|
+
-> validate or preview
|
|
14
|
+
-> confirm destructive changes
|
|
15
|
+
-> commit
|
|
16
|
+
-> explain and inspect state
|
|
17
|
+
-> return preview or export artifacts
|
|
18
|
+
```
|
|
19
|
+
|
|
20
|
+
Read `getCapabilities()`, `chart.getSpec()`, `chart.getState()`, and `chart.getPreferences()` before changing an existing chart. Preserve the user's original wording separately from the structured change. Do not pass natural-language prose directly as `planChart().intent`; map it to a registered intent token first.
|
|
21
|
+
|
|
22
|
+
## Request Routing
|
|
23
|
+
|
|
24
|
+
| User request | Runtime operation | Confirmation |
|
|
25
|
+
| --- | --- | --- |
|
|
26
|
+
| Change theme, palette, font size, legend, labels, or grid | `setTheme()` or `setPreferences()` | No, unless the host policy requires it |
|
|
27
|
+
| Replace all rows | `setData()` | Usually no; host decides |
|
|
28
|
+
| Change a task, milestone, node, edge, or project record | `previewEdit()` then `applyEdit()` | Yes for bulk, delete, or structural changes |
|
|
29
|
+
| Change chart type, field mapping, axes, title, labels, or layout | `update()` | No, unless it changes the product contract |
|
|
30
|
+
| Change one exact JSON path | `applyPatch()` | Prefer `update()` first |
|
|
31
|
+
| Export a result | `export()`, `downloadSVG()`, or `downloadPNG()` | No |
|
|
32
|
+
|
|
33
|
+
## Visual Change
|
|
34
|
+
|
|
35
|
+
Use the allowlisted preference contract instead of inventing CSS or theme tokens:
|
|
36
|
+
|
|
37
|
+
```js
|
|
38
|
+
const capabilities = getPreferenceCapabilities(chart.getSpec().type, { locale: 'en' });
|
|
39
|
+
const patch = {
|
|
40
|
+
theme: { mode: 'dark', palette: 'status' },
|
|
41
|
+
typography: { scale: 1.15 },
|
|
42
|
+
components: { grid: false }
|
|
43
|
+
};
|
|
44
|
+
const checked = validatePreferences(patch, { partial: true });
|
|
45
|
+
if (!checked.valid) throw new Error(JSON.stringify(checked.errors));
|
|
46
|
+
chart.setPreferences(checked.value, { source: 'agent' });
|
|
47
|
+
|
|
48
|
+
const state = chart.getState();
|
|
49
|
+
console.log(state.preferences, state.preferenceResolution, state.style);
|
|
50
|
+
```
|
|
51
|
+
|
|
52
|
+
Use `scope: 'global'` when the request applies to every chart sharing a `PreferencesStore`. Use the default chart scope for one chart.
|
|
53
|
+
|
|
54
|
+
## Data and Business Change
|
|
55
|
+
|
|
56
|
+
Use `setData()` only when replacing the chart's complete row set:
|
|
57
|
+
|
|
58
|
+
```js
|
|
59
|
+
chart.setData(nextRows);
|
|
60
|
+
```
|
|
61
|
+
|
|
62
|
+
For a semantic business change, preview a typed edit and commit the exact preview:
|
|
63
|
+
|
|
64
|
+
```js
|
|
65
|
+
const preview = chart.previewEdit({
|
|
66
|
+
type: 'data-edit',
|
|
67
|
+
operations: [{ op: 'updateProgress', taskId: 'task-2', progress: 80 }]
|
|
68
|
+
});
|
|
69
|
+
if (!preview.valid) return preview.errors;
|
|
70
|
+
|
|
71
|
+
const result = chart.applyEdit(preview.command, {
|
|
72
|
+
preview,
|
|
73
|
+
confirmed: true,
|
|
74
|
+
source: 'agent'
|
|
75
|
+
});
|
|
76
|
+
```
|
|
77
|
+
|
|
78
|
+
This preserves validation, revision checks, ChangeSet information, history, and undo/redo. Never mutate business rows directly when a typed edit operation exists.
|
|
79
|
+
|
|
80
|
+
## Spec Change
|
|
81
|
+
|
|
82
|
+
Use `update()` for normal configuration changes:
|
|
83
|
+
|
|
84
|
+
```js
|
|
85
|
+
chart.update({
|
|
86
|
+
title: { text: 'Monthly revenue' },
|
|
87
|
+
yAxis: { title: 'Revenue', nice: true },
|
|
88
|
+
labels: { enabled: true }
|
|
89
|
+
});
|
|
90
|
+
```
|
|
91
|
+
|
|
92
|
+
Use `applyPatch()` only when the Agent must address a known JSON path. Validate the result and inspect diagnostics after either operation.
|
|
93
|
+
|
|
94
|
+
## Required Self-check
|
|
95
|
+
|
|
96
|
+
After a committed change, inspect:
|
|
97
|
+
|
|
98
|
+
```js
|
|
99
|
+
const explanation = chart.explain();
|
|
100
|
+
const state = chart.getState();
|
|
101
|
+
|
|
102
|
+
return {
|
|
103
|
+
revision: state.revision,
|
|
104
|
+
health: state.health,
|
|
105
|
+
warnings: state.warnings,
|
|
106
|
+
assumptions: state.assumptions,
|
|
107
|
+
style: state.style,
|
|
108
|
+
preferenceResolution: state.preferenceResolution,
|
|
109
|
+
lineage: explanation.lineage
|
|
110
|
+
};
|
|
111
|
+
```
|
|
112
|
+
|
|
113
|
+
Report `UNKNOWN_INTENT`, `LABELS_SUPPRESSED`, `LABEL_TRUNCATED`, `FUNNEL_LABEL_TRUNCATED`, `VALUE_CLAMPED`, `NEGATIVE_VALUE_DROPPED`, `ZERO_TOTAL`, and unsupported-request diagnostics rather than hiding them.
|
|
114
|
+
|
|
115
|
+
## Prompt Template
|
|
116
|
+
|
|
117
|
+
The following prompt is suitable for Codex or WorkBuddy:
|
|
118
|
+
|
|
119
|
+
```text
|
|
120
|
+
Use the iChart.js Skill. Read the current Spec, state, preferences, and capabilities first.
|
|
121
|
+
Classify my request as visual style, complete data replacement, business record edit,
|
|
122
|
+
Spec configuration, diagram edit, or export.
|
|
123
|
+
|
|
124
|
+
Use setPreferences/setTheme for visual changes, setData for complete replacement,
|
|
125
|
+
previewEdit/applyEdit for business or diagram edits, update for normal Spec changes,
|
|
126
|
+
and applyPatch only for a precise JSON path. Validate or preview before committing.
|
|
127
|
+
Ask for confirmation before deletion, bulk edits, or structural changes. After applying,
|
|
128
|
+
run chart.explain() and chart.getState(), then return the changed values, warnings,
|
|
129
|
+
assumptions, lineage, preview URL, and artifact paths.
|
|
130
|
+
|
|
131
|
+
Request: <describe the desired change>
|
|
132
|
+
```
|
|
133
|
+
|
|
134
|
+
The host remains responsible for authentication, permissions, persistence, confirmation UI, and the natural-language model. iChart.js remains the validated JavaScript runtime and does not require a CLI, MCP server, or HTTP service for this workflow.
|
|
@@ -40,7 +40,7 @@ iChart.js 2.0 is a new Agent-first product line. Compatibility with 1.x and a 1.
|
|
|
40
40
|
|
|
41
41
|
## Iteration 13 Addendum — 2026-09-23
|
|
42
42
|
|
|
43
|
-
The historical 2.0.0 release decision remains unchanged. Release `v2.0.
|
|
43
|
+
The historical 2.0.0 release decision remains unchanged. Release `v2.0.21` includes Iteration 13 contract hardening, Iteration 14 lightweight Flow semantics, Iteration 15 text-readability hardening, Iteration 16 Agent presentation and acceptance hardening, and Iteration 17 production trust and Agent reliability hardening without adding a chart type: 18 chart profiles, 25 commands, 11 schemas, contract version `1.1`, atomic mutation validation, Mindmap edge discovery, strict TypeScript consumer compilation, no active source cycles, Node tests, Chromium browser acceptance, package dry-run verification, the 13F axis-free layout strategy, Timeline/Milestone layout hardening, renderer-parity Flow semantic shapes, native Flow ellipse primitives, adaptive diagram labels, diagram-only edge-label plates, polar label layout diagnostics for Pie, Donut, and Gauge, preference source resolution, conversational workflow guidance, effective-option explanations, stable normalization diagnostics, unsupported-renderer planning diagnostics, package-content checks, and Gallery browser acceptance.
|
|
44
44
|
|
|
45
45
|
## Deferred npm Publication
|
|
46
46
|
|
|
@@ -0,0 +1,70 @@
|
|
|
1
|
+
# Iteration 16 — Agent-ready Presentation and Acceptance Hardening
|
|
2
|
+
|
|
3
|
+
Iteration 16 consolidates the runtime after the chart, diagram, preference, and readability work. It adds no chart type. The goal is to make page-level configuration, Agent changes, browser rendering, lifecycle behavior, and conversational workflows explicit and testable.
|
|
4
|
+
|
|
5
|
+
## 16A — Gallery and Preference Precedence
|
|
6
|
+
|
|
7
|
+
- Make page, chart, Spec, and automatic style sources observable.
|
|
8
|
+
- Keep page-level Gallery controls authoritative for the charts they target.
|
|
9
|
+
- Keep chart-menu changes isolated to one chart.
|
|
10
|
+
- Allow `auto` to clear an override.
|
|
11
|
+
- Version persisted preferences and keep storage failures non-fatal.
|
|
12
|
+
- Test `project-gallery.html` and `preferences-lab.html` in a real browser.
|
|
13
|
+
|
|
14
|
+
The runtime precedence is:
|
|
15
|
+
|
|
16
|
+
```text
|
|
17
|
+
defaults → chart Spec → global PreferencesStore → chart PreferencesStore
|
|
18
|
+
```
|
|
19
|
+
|
|
20
|
+
`chart.getState().preferenceResolution` reports the precedence, storage mode, and source of each active scope.
|
|
21
|
+
|
|
22
|
+
## 16B — Agent State and Discoverability
|
|
23
|
+
|
|
24
|
+
- Expose preference resolution beside effective preferences.
|
|
25
|
+
- Publish the conversational routing contract through `getCapabilities()` and `capabilities.json`.
|
|
26
|
+
- Keep diagnostics for hidden, truncated, clamped, or unsupported content machine-readable.
|
|
27
|
+
- Document minimal executable examples for visual, data, Spec, project, and Diagram changes.
|
|
28
|
+
- Keep the Skill and English/Chinese Agent guides aligned.
|
|
29
|
+
|
|
30
|
+
## 16C — Renderer, Responsive, and Accessibility Acceptance
|
|
31
|
+
|
|
32
|
+
- Check SVG/Canvas parity for themes, labels, diagrams, and edge-label plates.
|
|
33
|
+
- Test narrow containers, long CJK labels, multiple legends, Funnel stages, and polar labels.
|
|
34
|
+
- Test settings-menu focus, keyboard operation, Escape closing, and ARIA labels.
|
|
35
|
+
- Use browser screenshots for visual acceptance in addition to SVG text assertions.
|
|
36
|
+
|
|
37
|
+
## 16D — Lifecycle and Performance Stability
|
|
38
|
+
|
|
39
|
+
- Repeated theme, preference, update, resize, and destroy operations must not duplicate listeners or menus.
|
|
40
|
+
- Recreate Gallery charts without stale observers or subscriptions.
|
|
41
|
+
- Record a baseline for the 18-chart Gallery and representative larger datasets.
|
|
42
|
+
- Keep package, export, Skill, docs, and manifest checks in the release gate.
|
|
43
|
+
|
|
44
|
+
## 16E — Conversational Workflow
|
|
45
|
+
|
|
46
|
+
- Define natural-language request classification without adding an NLP parser to the library.
|
|
47
|
+
- Route visual changes to `setPreferences()`/`setTheme()`.
|
|
48
|
+
- Route complete data replacement to `setData()`.
|
|
49
|
+
- Route business and Diagram edits through `previewEdit()`/`applyEdit()`.
|
|
50
|
+
- Route normal Spec changes to `update()` and precise JSON changes to `applyPatch()`.
|
|
51
|
+
- Require preview, validation, confirmation for destructive changes, and post-commit `explain()`/`getState()` checks.
|
|
52
|
+
- Add `docs/agent/conversational-workflow.md` and its Chinese companion.
|
|
53
|
+
|
|
54
|
+
## Acceptance
|
|
55
|
+
|
|
56
|
+
- Gallery top-level theme controls change the targeted charts and remain visible in `getState()`.
|
|
57
|
+
- A preference change reports its source and effective precedence.
|
|
58
|
+
- An Agent can follow one documented workflow to modify style, data, Spec, or Diagram content.
|
|
59
|
+
- Invalid changes remain atomic and produce structured diagnostics.
|
|
60
|
+
- SVG and Canvas remain behaviorally aligned for supported features.
|
|
61
|
+
- Repeated create/update/destroy cycles leave no stale runtime resources.
|
|
62
|
+
- `npm test`, browser tests, `npm run agent:check`, and `git diff --check` pass.
|
|
63
|
+
|
|
64
|
+
## Out of Scope
|
|
65
|
+
|
|
66
|
+
- New chart types.
|
|
67
|
+
- CLI, MCP, or HTTP services.
|
|
68
|
+
- A built-in natural-language model or parser.
|
|
69
|
+
- Collaborative editing.
|
|
70
|
+
- Arbitrary CSS injection or a large theme designer.
|
|
@@ -0,0 +1,55 @@
|
|
|
1
|
+
# Iteration 17 — Production Trust and Agent Reliability
|
|
2
|
+
|
|
3
|
+
Iteration 17 hardens the existing chart runtime for production Agent use. It adds no chart type, no CLI, no MCP server, and no HTTP service.
|
|
4
|
+
|
|
5
|
+
## 17A — Contract Reliability
|
|
6
|
+
|
|
7
|
+
- Diagnose unknown top-level Spec options instead of silently ignoring them.
|
|
8
|
+
- Keep `validateSpec()`, normalization, `createChart()`, capabilities, TypeScript, and manifests aligned.
|
|
9
|
+
- Preserve stable diagnostic codes, JSON paths, expected values, and actionable suggestions.
|
|
10
|
+
|
|
11
|
+
## 17B — Agent Self-check
|
|
12
|
+
|
|
13
|
+
- Expose effective rendering options and normalization results through `chart.explain()`.
|
|
14
|
+
- Report unsupported renderer requests during `planChart()` instead of returning only a fallback.
|
|
15
|
+
- Publish `agentReliability` in `getCapabilities()` and `capabilities.json`.
|
|
16
|
+
- Keep navigation, editing, and motion safe by default.
|
|
17
|
+
|
|
18
|
+
## 17C — Package and Integration Confidence
|
|
19
|
+
|
|
20
|
+
- Add a package dry-run gate for required runtime, TypeScript, Skill, recipes, and capability files.
|
|
21
|
+
- Reject accidental publication of `.trae`, `.github`, tests, and Playground development paths.
|
|
22
|
+
- Keep the consumer TypeScript fixture and ESM/headless examples in the release gate.
|
|
23
|
+
|
|
24
|
+
## 17D — Rendering and Accessibility Acceptance
|
|
25
|
+
|
|
26
|
+
- Continue SVG/Canvas parity checks for labels, diagrams, exports, and responsive layouts.
|
|
27
|
+
- Keep browser acceptance separate from headless checks and require explicit local-server evidence.
|
|
28
|
+
- Preserve static, safe defaults while testing opt-in navigation and editing.
|
|
29
|
+
|
|
30
|
+
## 17E — Open Source Maintenance
|
|
31
|
+
|
|
32
|
+
- Keep `CONTRIBUTING.md`, `SECURITY.md`, CI, release SOP, Skill, and Agent guides aligned.
|
|
33
|
+
- Record package and contract checks as mandatory contribution and release gates.
|
|
34
|
+
|
|
35
|
+
## Acceptance
|
|
36
|
+
|
|
37
|
+
```text
|
|
38
|
+
inspect data
|
|
39
|
+
→ plan chart
|
|
40
|
+
→ validate Spec
|
|
41
|
+
→ create chart
|
|
42
|
+
→ inspect effective options and health
|
|
43
|
+
→ preview/export
|
|
44
|
+
```
|
|
45
|
+
|
|
46
|
+
- Invalid or ignored configuration is diagnosable.
|
|
47
|
+
- An Agent can verify what actually rendered without reading renderer internals.
|
|
48
|
+
- The npm tarball contains only supported consumer artifacts.
|
|
49
|
+
- `npm run agent:check`, browser acceptance, and `git diff --check` pass.
|
|
50
|
+
|
|
51
|
+
## Out of Scope
|
|
52
|
+
|
|
53
|
+
- New chart types.
|
|
54
|
+
- NLP parsing inside the runtime.
|
|
55
|
+
- CLI, MCP, HTTP, Python, or 1.x compatibility layers.
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
# iChart.js 2.0 Roadmap
|
|
2
2
|
|
|
3
|
-
> Roadmap baseline: 2026-09-14. Current release status: `v2.0.
|
|
3
|
+
> Roadmap baseline: 2026-09-14. Current release status: `v2.0.21` includes the completed Iteration 12 structured-diagram work, Iteration 13 contract hardening, Iteration 14 lightweight Flow semantics, Iteration 15 text-readability hardening, Iteration 16 Agent presentation and acceptance hardening, Iteration 17 production trust and Agent reliability hardening, native Flow ellipse primitives, sector-aware Pie/Donut labels, radius-aware Gauge metrics, and the preceding layout and diagnostic improvements. Geographic charts and 3D rendering remain out of scope until explicitly reintroduced.
|
|
4
4
|
|
|
5
5
|
## Current Status
|
|
6
6
|
|
|
@@ -18,6 +18,9 @@
|
|
|
18
18
|
- Iteration 13A–13F is complete and included in `v2.0.18`: canonical contract registry and generated capability projection, atomic Spec/data/style mutations, row-complete project validation, explicit Mindmap edge metadata, complete public TypeScript declarations and consumer fixture, module-cycle and documentation/example gates, browser acceptance, package dry-run evidence, an axis-free layout strategy for Pie, Funnel, Gauge, and Radar, Timeline/Milestone layout hardening, and runtime diagnostics for constrained Funnel labels and Swimlane label aliases. No chart type was added.
|
|
19
19
|
- Iteration 14A–14D is complete and included in `v2.0.18`: lightweight Flow semantics for start/end, process, decision, input/output, and connector nodes, explicit decision branches and loops, shared SVG/Canvas geometry, capability discovery, validation, and Gallery coverage. No new chart type was added.
|
|
20
20
|
- Iteration 15A–15D is complete and included in `v2.0.19`: adaptive diagram node labels, semantic inline-first edge labels, diagram edge-label background plates, plate-free generic chart labels, shared SVG/Canvas fitting, unified label diagnostics, Agent/diagram documentation, and polar label layout hardening for Pie, Donut, and Gauge.
|
|
21
|
+
- Iteration 16A–16E is complete and included in `v2.0.20`: Gallery preference precedence, preference source resolution, conversational Agent routing, bilingual workflow guidance, manifest discovery, lifecycle regression coverage, and browser acceptance for Gallery theme controls.
|
|
22
|
+
- Flow start/end nodes now use native ellipse geometry across Scene Graph, SVG, Canvas, export, scaling, and hit testing.
|
|
23
|
+
- Iteration 17A–17E is complete and included in `v2.0.21`: unknown-option diagnostics, effective Agent explanations, unsupported renderer planning diagnostics, `agentReliability` discovery, npm package-content checks, and production-trust documentation. See `docs/agent/development/iteration-17.md`.
|
|
21
24
|
- The original `2.0.0` readiness record is historical and superseded by the published `2.0.x` releases. Current release checks are defined by `docs/agent/development/release-sop.md`.
|
|
22
25
|
|
|
23
26
|
## Iteration 4 — Agent Data Contract and Business Editing
|
|
@@ -276,6 +279,20 @@ Allow users and Agents to adjust a chart's visual presentation after creation th
|
|
|
276
279
|
- Settings UI is excluded from SVG, PNG, and JSON chart exports.
|
|
277
280
|
- `npm run agent:check`, `git diff --check`, and `http://localhost:3000/playground/preferences-lab.html` acceptance pass.
|
|
278
281
|
|
|
282
|
+
## Iteration 16 — Agent-ready Presentation and Acceptance Hardening
|
|
283
|
+
|
|
284
|
+
### Goal
|
|
285
|
+
|
|
286
|
+
Make page-level configuration, Agent changes, browser rendering, lifecycle behavior, and natural-language workflows explicit and testable without adding chart types or a separate service. The complete plan and acceptance contract are in `docs/agent/development/iteration-16.md`.
|
|
287
|
+
|
|
288
|
+
### Deliverables
|
|
289
|
+
|
|
290
|
+
- `chart.getState().preferenceResolution` and `PreferencesStore.getResolution()`.
|
|
291
|
+
- Capability and manifest entries for conversational routing and preference precedence.
|
|
292
|
+
- Bilingual `conversational-workflow.md` guidance for style, data, Spec, Diagram, and export requests.
|
|
293
|
+
- Gallery theme-control browser regression and Iteration 16 runtime tests.
|
|
294
|
+
- Updated Skill, README, runtime contract, usage scenarios, TypeScript declarations, and generated manifests.
|
|
295
|
+
|
|
279
296
|
## Recommended Execution Order
|
|
280
297
|
|
|
281
298
|
1. Finish Iteration 3 browser acceptance.
|
|
@@ -286,4 +303,5 @@ Allow users and Agents to adjust a chart's visual presentation after creation th
|
|
|
286
303
|
6. Execute Iteration 8 to complete existing chart behavior, Agent adaptation, and the 2.0 release gates.
|
|
287
304
|
7. Execute Iteration 9 to standardize adaptive visual styling without expanding chart count.
|
|
288
305
|
8. Execute Iteration 11 to add post-creation chart and page preferences without expanding chart count.
|
|
289
|
-
9.
|
|
306
|
+
9. Complete Iteration 16 acceptance hardening before introducing another chart family or service integration.
|
|
307
|
+
10. Re-evaluate geographic and 3D scope only after usage data confirms demand.
|
|
@@ -71,6 +71,8 @@ For a mindmap, prefer the compact parent contract:
|
|
|
71
71
|
|
|
72
72
|
Supported kinds are `start`, `end`, `process`, `decision`, `io`, and `connector`. A decision should have at least two outgoing labeled edges. Loops are ordinary explicit `from`/`to` edges and are allowed. Connectors are circular hand-off points; they do not use implicit matching, so every connection remains visible in `edges`.
|
|
73
73
|
|
|
74
|
+
Flow `start` and `end` nodes render as true ellipse shapes; `process` nodes are rectangles, `decision` nodes are diamonds, and `io` nodes are parallelograms.
|
|
75
|
+
|
|
74
76
|
Node labels are centered on the node and use adaptive fitting: they wrap to at most two lines, reduce to a bounded minimum font size, and truncate only as a last resort. Compact nodes such as small connectors suppress their internal label rather than rendering unreadable text; the full label remains in the node data and accessibility surface. Edge labels stay inline when space permits, use a high-opacity background plate when the line would reduce contrast, and move aside only when they collide with nodes or other labels. `getState().layout.labels` and `explain().warnings` expose any wrapping, scaling, truncation, or suppression.
|
|
75
77
|
|
|
76
78
|
## Current Capabilities
|
|
@@ -10,7 +10,7 @@ This is the production component path. For one-off files or Agent-led repository
|
|
|
10
10
|
npm install @taylorwong/ichartjs@^2
|
|
11
11
|
```
|
|
12
12
|
|
|
13
|
-
For environments without npm registry access, install from GitHub as a fallback: `npm install github:wanghetommy/ichartjs#v2.0.
|
|
13
|
+
For environments without npm registry access, install from GitHub as a fallback: `npm install github:wanghetommy/ichartjs#v2.0.21`.
|
|
14
14
|
|
|
15
15
|
Use the package through a bundler or another environment that resolves npm ESM imports:
|
|
16
16
|
|
|
@@ -12,6 +12,8 @@ Agents should use `getCapabilities()` first instead of hard-coding undeclared ty
|
|
|
12
12
|
|
|
13
13
|
For post-creation visual settings, use `getPreferenceCapabilities(chartType, { locale }) → chart.getPreferences() → validatePreferences(patch) → chart.setPreferences(patch, { source: 'agent' }) → chart.getState().preferences`. This keeps Agent changes on the same allowlisted contract as the built-in settings menu.
|
|
14
14
|
|
|
15
|
+
The effective preference precedence is `defaults → chart Spec → global PreferencesStore → chart PreferencesStore`. Use `chart.getState().preferenceResolution` to inspect the active scopes, storage mode, and source metadata. The runtime does not parse natural-language prose; use the [Conversational Workflow](conversational-workflow.md) to route prose to the correct mutation API.
|
|
16
|
+
|
|
15
17
|
Iteration 8 adds per-chart profiles through `getChartCapability(type)`. Each profile declares required data roles, supported interactions, renderers, feature status, exports, and practical limits. Unsupported behavior must be handled from this profile or from validation diagnostics rather than guessed.
|
|
16
18
|
|
|
17
19
|
`planChart(data, { intent, renderer })` returns a versioned planning result with a primary chart, alternatives, confidence, reasons, required fields, suggested encodings, assumptions, warnings, unsupported requests, safe next actions, and the selected capability profile. `intent` must be one exact token from `getCapabilities().intents`; natural-language prose must be mapped before planning. An unknown token returns `UNKNOWN_INTENT` and a fallback plan, so Agents must inspect warnings before accepting `primary`. Planning never invents business meaning, units, dates, or missing fields.
|
|
@@ -127,7 +129,7 @@ chart.downloadSVG()
|
|
|
127
129
|
chart.downloadJSON()
|
|
128
130
|
```
|
|
129
131
|
|
|
130
|
-
Validation results contain separate `errors`, `warnings`, and `normalizations`. Diagnostics use stable codes, JSON-oriented paths, expected values where useful, and actionable suggestions. `chart.explain()` returns encodings, transforms, interactions, assumptions, warnings, stable record lineage, and an accessibility summary.
|
|
132
|
+
Validation results contain separate `errors`, `warnings`, and `normalizations`. Diagnostics use stable codes, JSON-oriented paths, expected values where useful, and actionable suggestions. Unknown top-level options return `UNKNOWN_SPEC_OPTION` instead of being silently treated as valid configuration. `chart.explain()` returns encodings, transforms, interactions, effective options, normalizations, assumptions, warnings, stable record lineage, and an accessibility summary.
|
|
131
133
|
|
|
132
134
|
For lineage checks and linked updates, provide stable string `id` values on input rows. Without one, the runtime uses deterministic positional IDs such as `record-0`; these are suitable for a local self-check but not for durable business identity.
|
|
133
135
|
|
|
@@ -8,6 +8,8 @@ iChart.js has three layers:
|
|
|
8
8
|
|
|
9
9
|
The Skill is not a second renderer or service. A Skill-enabled Agent still needs a JavaScript host to render an interactive chart or create a file.
|
|
10
10
|
|
|
11
|
+
For natural-language changes to an existing chart, use the [Conversational Workflow](conversational-workflow.md). The Runtime does not parse prose itself; the host Agent maps prose to validated Runtime calls.
|
|
12
|
+
|
|
11
13
|
## Choose a Scenario
|
|
12
14
|
|
|
13
15
|
| Need | Use | Runtime location | Typical output |
|
|
@@ -79,6 +81,8 @@ const chart = createChart({
|
|
|
79
81
|
|
|
80
82
|
The host application owns data loading, authentication, routing, persistence, and state management. Call `setData()` for row changes, `update()` for Spec changes, and `destroy()` before replacing the component.
|
|
81
83
|
|
|
84
|
+
For a request such as “use a dark theme, hide the grid, and change the March value,” route the style part through `setPreferences()` and the business-record part through `previewEdit()`/`applyEdit()` rather than mutating rows directly. Return the resulting `explain()` and `getState()` diagnostics.
|
|
85
|
+
|
|
82
86
|
Use this scenario for dashboards, admin pages, project management products, editors, and embedded analytics.
|
|
83
87
|
|
|
84
88
|
## Scenario 2: Ask a Coding Agent to Modify a Project
|
|
@@ -121,7 +125,7 @@ npx skills add wanghetommy/ichartjs --skill ichartjs --agent codex --global --ye
|
|
|
121
125
|
For reproducible installation, pin the released Skill directory:
|
|
122
126
|
|
|
123
127
|
```bash
|
|
124
|
-
npx skills add https://github.com/wanghetommy/ichartjs/tree/v2.0.
|
|
128
|
+
npx skills add https://github.com/wanghetommy/ichartjs/tree/v2.0.21/skills/ichartjs \
|
|
125
129
|
--agent codex --global --yes
|
|
126
130
|
```
|
|
127
131
|
|
|
@@ -22,7 +22,7 @@ npm Registry 中无作用域的 `ichartjs` 是安全占位包,并非本项目
|
|
|
22
22
|
npx skills add wanghetommy/ichartjs --skill ichartjs
|
|
23
23
|
```
|
|
24
24
|
|
|
25
|
-
Codex 全局无交互安装可追加 `--agent codex --global --yes`。需要固定发布版本时,安装 `https://github.com/wanghetommy/ichartjs/tree/v2.0.
|
|
25
|
+
Codex 全局无交互安装可追加 `--agent codex --global --yes`。需要固定发布版本时,安装 `https://github.com/wanghetommy/ichartjs/tree/v2.0.21/skills/ichartjs`。WorkBuddy 可通过自身 Skill 界面导入该带 Tag 的目录;只有当前 CLI 明确声明对应适配器时才使用宿主专用 `--agent` 参数。
|
|
26
26
|
|
|
27
27
|
使用 `npx skills add wanghetommy/ichartjs --list` 验证发现结果,其中应包含 `ichartjs`。
|
|
28
28
|
|
|
@@ -0,0 +1,128 @@
|
|
|
1
|
+
# 自然语言修改工作流
|
|
2
|
+
|
|
3
|
+
iChart.js Runtime 不在内部解析自然语言。Codex、WorkBuddy 等宿主 Agent 负责理解用户请求,并将请求转换成公开的 JavaScript API;Runtime 负责校验、提交、渲染、解释和导出。
|
|
4
|
+
|
|
5
|
+
## 安全执行流程
|
|
6
|
+
|
|
7
|
+
所有对话式修改都遵循:
|
|
8
|
+
|
|
9
|
+
```text
|
|
10
|
+
读取当前状态
|
|
11
|
+
→ 判断请求类型
|
|
12
|
+
→ 生成结构化变更
|
|
13
|
+
→ 校验或预览
|
|
14
|
+
→ 破坏性操作请求确认
|
|
15
|
+
→ 提交
|
|
16
|
+
→ explain 和 getState 自检
|
|
17
|
+
→ 返回预览或导出结果
|
|
18
|
+
```
|
|
19
|
+
|
|
20
|
+
修改已有图表前,先读取 `getCapabilities()`、`chart.getSpec()`、`chart.getState()` 和 `chart.getPreferences()`。原始自然语言应单独保留,不能直接把自然语言句子传给 `planChart().intent`,应先映射为已注册的 intent token。
|
|
21
|
+
|
|
22
|
+
## 请求分流
|
|
23
|
+
|
|
24
|
+
| 用户请求 | Runtime 操作 | 是否确认 |
|
|
25
|
+
| --- | --- | --- |
|
|
26
|
+
| 修改主题、配色、字号、图例、标签、网格 | `setTheme()` 或 `setPreferences()` | 通常不需要 |
|
|
27
|
+
| 替换全部数据行 | `setData()` | 由宿主策略决定 |
|
|
28
|
+
| 修改任务、里程碑、节点、连线或项目记录 | `previewEdit()` → `applyEdit()` | 批量、删除、结构调整需要 |
|
|
29
|
+
| 修改图表类型、字段、坐标轴、标题、标签或布局 | `update()` | 通常不需要 |
|
|
30
|
+
| 修改一个明确的 JSON 路径 | `applyPatch()` | 优先使用 `update()` |
|
|
31
|
+
| 导出结果 | `export()`、`downloadSVG()` 或 `downloadPNG()` | 不需要 |
|
|
32
|
+
|
|
33
|
+
## 修改样式
|
|
34
|
+
|
|
35
|
+
使用白名单偏好接口,不要让 Agent 自行发明 CSS 或颜色 Token:
|
|
36
|
+
|
|
37
|
+
```js
|
|
38
|
+
const capabilities = getPreferenceCapabilities(chart.getSpec().type, { locale: 'zh-CN' });
|
|
39
|
+
const patch = {
|
|
40
|
+
theme: { mode: 'dark', palette: 'status' },
|
|
41
|
+
typography: { scale: 1.15 },
|
|
42
|
+
components: { grid: false }
|
|
43
|
+
};
|
|
44
|
+
const checked = validatePreferences(patch, { partial: true });
|
|
45
|
+
if (!checked.valid) throw new Error(JSON.stringify(checked.errors));
|
|
46
|
+
chart.setPreferences(checked.value, { source: 'agent' });
|
|
47
|
+
|
|
48
|
+
const state = chart.getState();
|
|
49
|
+
console.log(state.preferences, state.preferenceResolution, state.style);
|
|
50
|
+
```
|
|
51
|
+
|
|
52
|
+
使用共享 `PreferencesStore` 时,`scope: 'global'` 表示修改页面全部图表;默认作用于当前图表。
|
|
53
|
+
|
|
54
|
+
## 修改数据和业务记录
|
|
55
|
+
|
|
56
|
+
只有在替换整批数据时使用 `setData()`:
|
|
57
|
+
|
|
58
|
+
```js
|
|
59
|
+
chart.setData(nextRows);
|
|
60
|
+
```
|
|
61
|
+
|
|
62
|
+
修改任务、里程碑、节点、边等业务记录时,使用带预览的编辑命令:
|
|
63
|
+
|
|
64
|
+
```js
|
|
65
|
+
const preview = chart.previewEdit({
|
|
66
|
+
type: 'data-edit',
|
|
67
|
+
operations: [{ op: 'updateProgress', taskId: 'task-2', progress: 80 }]
|
|
68
|
+
});
|
|
69
|
+
if (!preview.valid) return preview.errors;
|
|
70
|
+
|
|
71
|
+
const result = chart.applyEdit(preview.command, {
|
|
72
|
+
preview,
|
|
73
|
+
confirmed: true,
|
|
74
|
+
source: 'agent'
|
|
75
|
+
});
|
|
76
|
+
```
|
|
77
|
+
|
|
78
|
+
这样可以保留校验、revision、ChangeSet、历史记录和撤销/重做。存在对应编辑命令时,不要直接修改业务数据对象。
|
|
79
|
+
|
|
80
|
+
## 修改 Spec 配置
|
|
81
|
+
|
|
82
|
+
普通配置修改使用 `update()`:
|
|
83
|
+
|
|
84
|
+
```js
|
|
85
|
+
chart.update({
|
|
86
|
+
title: { text: '月度收入' },
|
|
87
|
+
yAxis: { title: '收入', nice: true },
|
|
88
|
+
labels: { enabled: true }
|
|
89
|
+
});
|
|
90
|
+
```
|
|
91
|
+
|
|
92
|
+
只有在必须修改明确 JSON 路径时才使用 `applyPatch()`。两种修改后都要检查校验结果和诊断信息。
|
|
93
|
+
|
|
94
|
+
## 提交后的自检
|
|
95
|
+
|
|
96
|
+
```js
|
|
97
|
+
const explanation = chart.explain();
|
|
98
|
+
const state = chart.getState();
|
|
99
|
+
|
|
100
|
+
return {
|
|
101
|
+
revision: state.revision,
|
|
102
|
+
health: state.health,
|
|
103
|
+
warnings: state.warnings,
|
|
104
|
+
assumptions: state.assumptions,
|
|
105
|
+
style: state.style,
|
|
106
|
+
preferenceResolution: state.preferenceResolution,
|
|
107
|
+
lineage: explanation.lineage
|
|
108
|
+
};
|
|
109
|
+
```
|
|
110
|
+
|
|
111
|
+
`UNKNOWN_INTENT`、`LABELS_SUPPRESSED`、`LABEL_TRUNCATED`、`FUNNEL_LABEL_TRUNCATED`、`VALUE_CLAMPED`、`NEGATIVE_VALUE_DROPPED`、`ZERO_TOTAL` 和不支持的配置都必须报告,不能静默忽略。
|
|
112
|
+
|
|
113
|
+
## 推荐提示词
|
|
114
|
+
|
|
115
|
+
```text
|
|
116
|
+
使用 iChart.js Skill。先读取当前 Spec、状态、偏好和能力清单。
|
|
117
|
+
判断我的请求属于视觉样式、整批数据替换、业务记录编辑、Spec 配置、Diagram 编辑还是导出。
|
|
118
|
+
|
|
119
|
+
视觉调整使用 setPreferences/setTheme;整批替换使用 setData;
|
|
120
|
+
业务和 Diagram 编辑使用 previewEdit/applyEdit;普通 Spec 配置使用 update;
|
|
121
|
+
只有精确 JSON 路径修改才使用 applyPatch。提交前先校验或预览。
|
|
122
|
+
删除、批量修改和结构调整先请求确认。提交后调用 chart.explain() 和 chart.getState(),
|
|
123
|
+
返回变更内容、警告、假设、lineage、预览地址和文件路径。
|
|
124
|
+
|
|
125
|
+
请求:<描述需要的修改>
|
|
126
|
+
```
|
|
127
|
+
|
|
128
|
+
宿主负责权限、确认界面、持久化和自然语言模型;iChart.js 负责可校验的 JavaScript Runtime,不需要为了这个工作流增加 CLI、MCP 或 HTTP 服务。
|
|
@@ -70,6 +70,8 @@ Architecture 的 `layers` 是从上到下排列的水平分层。同层自动布
|
|
|
70
70
|
|
|
71
71
|
支持的 `kind` 为 `start`、`end`、`process`、`decision`、`io` 和 `connector`。判断节点建议至少有两条带标签的出边;循环就是普通的显式 `from` / `to` 回边。Connector 是圆形的断开连接点,不使用隐式同名匹配,所有连接都必须明确写在 `edges` 中。
|
|
72
72
|
|
|
73
|
+
Flow 的 `start` 和 `end` 节点使用真正的椭圆图元;`process` 使用矩形,`decision` 使用菱形,`io` 使用平行四边形。
|
|
74
|
+
|
|
73
75
|
节点文字默认在节点内居中,并按自适应规则处理:优先保持字号,必要时最多换成两行,再缩小到有限的最小字号,最后才截断。尺寸过小的节点(例如小型 Connector)会隐藏内部文字,避免显示不全;完整文字仍保留在节点数据和无障碍语义中。连线文字在空间足够时优先贴近连线显示;线条影响对比度时使用高不透明度背景底板,只有与节点或其他文字冲突时才移到连线旁边。`getState().layout.labels` 和 `explain().warnings` 会暴露换行、缩放、截断和隐藏结果。
|
|
74
76
|
|
|
75
77
|
## 当前能力
|
|
@@ -6,7 +6,7 @@ iChart.js 应作为普通 JavaScript UI 组件运行在浏览器应用中。数
|
|
|
6
6
|
npm install @taylorwong/ichartjs@^2
|
|
7
7
|
```
|
|
8
8
|
|
|
9
|
-
无法访问 npm Registry 的环境请用 GitHub 源作为后备:`npm install github:wanghetommy/ichartjs#v2.0.
|
|
9
|
+
无法访问 npm Registry 的环境请用 GitHub 源作为后备:`npm install github:wanghetommy/ichartjs#v2.0.21`。
|
|
10
10
|
|
|
11
11
|
```js
|
|
12
12
|
import { createChart } from '@taylorwong/ichartjs';
|