Dev: new dynamic widget for mcp app & Chinese website

.github/release-notes/0.3.0.md

@@ -0,0 +1,43 @@
+# Flint 0.3
+
+Flint 0.3 makes charts easier to explore after they are created. The MCP App can
+now switch between compatible chart types and edit chart properties in place,
+while keeping the original Flint spec compact and readable.
+
+## Explore chart types
+
+Move between compatible views without asking the agent to rebuild the chart.
+Flint preserves the data roles and derives the details needed by the new chart
+type.
+
+<img width="1086" alt="Switching a line chart to a Sparkline in the Flint MCP App" src="https://github.com/user-attachments/assets/f9194ec7-65ab-4120-aca7-09328db8d39a" />
+
+## Edit chart properties
+
+Common chart properties are available directly in the widget. Changes are
+immediate, and the available controls follow the selected chart and backend.
+
+<img width="1091" alt="Turning labels on for a heatmap in the Flint MCP App" src="https://github.com/user-attachments/assets/2915bf55-a55d-4ad1-a7d7-e660732c0b46" />
+
+## Flint in Chinese
+
+The website and documentation are now available in Chinese, including guides for
+getting started, authoring charts, and extending Flint.
+
+<img width="1239" alt="The Chinese Flint website and documentation" src="https://github.com/user-attachments/assets/1d300716-6cf1-475f-9483-00e926463d6e" />
+
+## Smaller updates
+
+- Added backend-neutral chart recommendations and chart transformations.
+- Improved sparse area charts, grouped bars, boxplots, Gantt charts, and
+  Waterfall charts across supported backends.
+- Improved semantic formatting for axes, aggregates, and Sparkline averages.
+- Sparklines now self-scale each row and no longer expose a shared-Y option.
+- Added PNG copy, download, and reset actions to the MCP App.
+- Expanded chart-property guidance in the bundled agent skill and reference
+  documentation.
+
+See the [changelog](https://github.com/microsoft/flint-chart/blob/main/CHANGELOG.md#030---2026-07-19)
+for migration notes and the complete technical summary.
+
+**Full Changelog**: https://github.com/microsoft/flint-chart/compare/0.2.1...0.3.0

CHANGELOG.md

@@ -3,12 +3,56 @@
 Starting with version 0.2.1, all notable changes to `flint-chart` and
 `flint-chart-mcp` are documented in this file. The two npm packages are
 versioned and released together, so each release entry covers both packages.
+Versions 0.2.1 and 0.2.2 were development milestones and were not published to
+npm; 0.3.0 is the next public release after 0.2.0.
 
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
 ## [Unreleased]
 
+## [0.3.0] - 2026-07-19
+
+### Added
+
+- Backend-neutral chart-type recommendations and chart transformations, including
+  compatible chart-type transitions and data-preserving arrangement controls.
+- Public transform and recommendation APIs for Vega-Lite, ECharts, and Chart.js.
+- Dynamic MCP App controls that switch chart types, rearrange encodings, and edit
+  chart properties in place without rewriting the authored Flint spec, plus PNG
+  copy/download and reset actions.
+- Gantt task-height, corner-radius, and interval-label controls.
+- A Chinese-language website and translated documentation.
+
+### Changed
+
+- Improved recommendation quality and backend parity for area, bar, boxplot,
+  Gantt, scatter, waterfall, and related chart families.
+- Sparkline rows now always use independent Y scales, matching the chart's
+  per-series comparison semantics. The obsolete `independentYAxis` option is no
+  longer exposed for Sparklines.
+- Vega-Lite axes and derived text marks now share semantic formatting logic, so
+  currency and other formatted aggregate values retain their intended units.
+- Sparse stacked areas and streamgraphs now interpolate interior gaps and extend
+  the nearest measured edge value instead of dropping abruptly to zero;
+  unstacked areas connect measured points without fabricating rows.
+
+### Migration
+
+- Sparkline no longer accepts a shared Y scale. Remove
+  `chartProperties.independentYAxis` from Sparkline specs; every row now
+  self-scales. Other faceted chart types continue to support the property.
+- The grouped-chart `dodge` property no longer accepts `none`. Use `auto` to let
+  redundant groups collapse to one glyph per band, or choose `local`/`global`.
+- Vega-Lite Rose Chart no longer accepts `innerRadius`; use Pie Chart with an
+  inner radius for a donut-style display.
+
+### Fixed
+
+- Corrected Sparkline row alignment and average-value formatting.
+- Improved local dodge behavior for sparse grouped bars and boxplots across
+  supported backends.
+
 ## [0.2.2] - 2026-07-15
 
 ### Added
@@ -61,6 +105,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Treated only lowercase `start` and `end` Waterfall Type values as total
   anchors in Vega-Lite; other values now remain floating deltas colored by sign.
 
-[Unreleased]: https://github.com/microsoft/flint-chart/compare/0.2.2...HEAD
-[0.2.2]: https://github.com/microsoft/flint-chart/compare/0.2.1...0.2.2
+[Unreleased]: https://github.com/microsoft/flint-chart/compare/0.3.0...HEAD
+[0.3.0]: https://github.com/microsoft/flint-chart/compare/88fbeb5ebf07f18a1cf661ebef71cc570b7425d6...0.3.0
+[0.2.2]: https://github.com/microsoft/flint-chart/compare/0.2.1...6a9d4e4155e3d9e2bed3fa9adf5316914f791478
 [0.2.1]: https://github.com/microsoft/flint-chart/compare/c8e20b052ad9ddad29ba3ecfc825948c424e5ba5...0.2.1

README.md

@@ -5,7 +5,7 @@
 [![CI](https://github.com/microsoft/flint-chart/actions/workflows/ci.yml/badge.svg)](https://github.com/microsoft/flint-chart/actions/workflows/ci.yml)
 [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](LICENSE)
 
-**Please visit:** [**Flint Project Site**](https://microsoft.github.io/flint-chart/) | [**MCP Server Guide**](https://microsoft.github.io/flint-chart/#/mcp)
+**Please visit:** [**Flint Project Site**](https://microsoft.github.io/flint-chart/) | [**MCP Server Guide**](https://microsoft.github.io/flint-chart/#/mcp) | [**中文主页**](https://microsoft.github.io/flint-chart/#/zh)
 
 Flint is a visualization intermediate language that lets **AI agents create
 expressive, polished visualizations from simple, human-editable chart specs**.
@@ -44,6 +44,17 @@ This repo contains two main components:
   chart guidance so they can choose a template, validate it, and open an
   interactive chart view in MCP-capable clients.
 
+## Updates
+
+- **July 19, 2026** — Flint 0.3.0 adds dynamic chart widgets that switch chart
+  types and edit chart properties in place. ([v0.3.0](https://github.com/microsoft/flint-chart/releases/tag/0.3.0))
+- **July 15, 2026** — Flint 0.2.2 added compact dodge modes and grouped violin
+  layouts.
+- **July 13, 2026** — Flint 0.2.1 improved chart-property validation and backend
+  consistency. ([v0.2.1](https://github.com/microsoft/flint-chart/releases/tag/0.2.1))
+
+See the [changelog](CHANGELOG.md) for complete release notes.
+
 
 <p align="center">
   <img src="docs/figs/compile-demo.png" alt="Flint compiling a compact chart spec into a Vega-Lite spec and rendered heatmap visualization." width="100%">

agent-skills/flint-chart-author/SKILL.md

@@ -182,15 +182,15 @@ properties"). Required channels are noted.
 | `"Ranged Dot Plot"` | x, y, color | dumbbell of two x per category |
 | `"Strip Plot"` | x, y, color, size, column, row | jittered points; props `stepWidth`, `pointSize`, `opacity` |
 | `"Bar Chart"` | x, y, color, opacity, column, row | one discrete + one measure; prop `cornerRadius` |
-| `"Grouped Bar Chart"` | x, y, group, column, row | `group` = the clustering category |
+| `"Grouped Bar Chart"` | x, y, group, column, row | `group` = the clustering category; prop `dodge` |
 | `"Stacked Bar Chart"` | x, y, color, column, row | prop `stackMode` |
 | `"Pyramid Chart"` | x, y, color | diverging horizontal bars |
 | `"Lollipop Chart"` | x, y, color, column, row | prop `dotSize` |
 | `"Waterfall Chart"` | x, y, color, column, row | `color` = Type column, values `start`/`delta`/`end` only; omit it for auto sign coloring; props `cornerRadius`, `totals` |
 | `"Gantt Chart"` | y, x, x2, color, detail, column, row | x = start, x2 = end |
 | `"Bullet Chart"` | y, x, goal, color, column, row | `goal` required (target) |
 | `"Histogram"` | x, color, column, row | x = measure to bin; prop `binCount` |
-| `"Boxplot"` | x, y, color, opacity, column, row | category + measure; props `whiskerMethod`, `showOutliers` |
+| `"Boxplot"` | x, y, color, opacity, column, row | category + measure; props `whiskerMethod`, `showOutliers`, `dodge` |
 | `"ECDF Plot"` | x, color, detail, column, row | x = measure; cumulative distribution (step line); prop `showPoints` |
 | `"Heatmap"` | x, y, color, column, row | color = the measure |
 | `"Line Chart"` | x, y, color, strokeDash, detail, opacity, column, row | props `interpolate`, `showPoints` |
@@ -199,11 +199,11 @@ properties"). Required channels are noted.
 | `"Slope Chart"` | x, y, color, detail, column, row | two-period value change; straight segments + end points, one line per category |
 | `"Area Chart"` | x, y, color, opacity, column, row | props `interpolate`, `opacity`, `stackMode` |
 | `"Range Area Chart"` | x, y, y2, color, column, row | x + y + y2 required; translucent band from `y` (low) to `y2` (high), value axis fits the band (not zero) |
-| `"Violin Plot"` | x, y, color, row | x (category) + y (measure) required; mirrored KDE density per category, prop `bandwidth`; **Vega-Lite only**; `column` is used internally for the per-category panels |
+| `"Violin Plot"` | x, y, color, row | x (category) + y (measure) required; mirrored KDE density per category, prop `bandwidth`; **Vega-Lite only**; a genuine `color` subgroup splits two groups or grids 3+ groups |
 | `"Streamgraph"` | x, y, color, column, row | centre-stacked areas |
 | `"Density Plot"` | x, color, column, row | prop `bandwidth` |
-| `"Pie Chart"` | size, color, column, row | `size` = slice value (→ angle), `color` = category |
-| `"Rose Chart"` | x, y, color, column, row | polar bars; props `alignment`, `innerRadius`, `padAngle` |
+| `"Pie Chart"` | size, color, column, row | `size` = slice value (→ angle), `color` = category; props `innerRadius`, `sortSlices` |
+| `"Rose Chart"` | x, y, color, column, row | polar bars; props `alignment`, `padAngle`, `sortSlices` |
 | `"Radar Chart"` | x, y, color, column, row | props `filled`, `fillOpacity`, `strokeWidth` |
 | `"Candlestick Chart"` | x, open, high, low, close, column, row | OHLC all required |
 | `"Bar Table"` | y, x, color, column, row | compact bars + value labels |
@@ -218,10 +218,9 @@ category on `x` (or `y`) plus one measure. They differ in how a **second**
 category is shown — and each reads that second category from a **different
 channel**:
 
-- `"Bar Chart"` — no second category. One bar per `x` value. A `color`
-  encoding just tints the bars (or stacks segments if multiple rows share an
-  `x`). It has **no `group` channel**, so a `group` encoding is silently
-  ignored.
+- `"Bar Chart"` — use for a single series. When multiple rows share an `x`, a
+  second category on `color` produces stacked segments. For side-by-side bars,
+  use `"Grouped Bar Chart"` with the second category on `group`.
 - `"Stacked Bar Chart"` — second category on `color`, drawn as **stacked**
   segments within each bar (totals matter). Tune with `stackMode`
   (`stacked` / `normalize` / `layered`).
@@ -344,7 +343,8 @@ derived). Values are clamped to the ranges shown.
 | Chart type | Property | Type / range (default) | Effect |
 |---|---|---|---|
 | Bar Chart | `cornerRadius` | 0–15 (0) | Round bar corners (px) |
-| Bar / Area / Stacked Bar | `stackMode` | `stacked` \| `normalize` \| `layered` (unset) | Stacking behavior; `normalize` = 100% |
+| Area / Stacked Bar | `stackMode` | `stacked` \| `normalize` \| `center` \| `layered` (unset) | Stacking behavior; `normalize` = 100%, `center` = streamgraph |
+| Grouped Bar / Boxplot | `dodge` | `auto` \| `local` \| `global` (`auto`) | `local` compacts sparse groups per category; `global` preserves aligned group lanes; leave `auto` unless the user requests one |
 | Line / Area / Sparkline | `interpolate` | `linear` \| `monotone` \| `step` \| `step-before` \| `step-after` \| `basis` \| `cardinal` \| `catmull-rom` (`linear`) | Curve shape |
 | Line / ECDF Plot | `showPoints` | boolean (false) | Draw point markers on the line |
 | Sparkline | `baseline` | `mean` \| `zero` \| `median` \| `none` (`mean`) | Reference line per spark row |
@@ -359,12 +359,13 @@ derived). Values are clamped to the ranges shown.
 | Histogram | `binCount` | 5–50 (10) | Number of bins |
 | Density Plot | `bandwidth` | 0.05–2 (0=auto) | Kernel bandwidth |
 | Pie Chart | `innerRadius` | 0–100 (0) | Donut hole size (>0 → donut) |
+| Pie / Rose | `sortSlices` | `none` \| `descending` \| `ascending` (`none`) | Order wedges and their legend by slice value |
 | Rose Chart | `alignment` | `left` \| `center` (`left`) | Wedge alignment |
-| Rose Chart | `innerRadius` | 0–100 (0) | Inner radius |
 | Rose Chart | `padAngle` | 0–0.1 (0) | Gap between slices |
 | Lollipop | `dotSize` | 20–300 (80) | Circle size (px) |
 | Waterfall | `cornerRadius` | 0–8 (0) | Round bar corners |
 | Waterfall | `totals` | `auto` \| `none` \| `first` \| `last` \| `both` (`auto`) | Which bars anchor to zero as totals (only when no Type column) |
+| Waterfall | `showTextLabels` | boolean (false) | Render value labels on bars |
 | Regression | `regressionMethod` | `linear` \| `log` \| `exp` \| `pow` \| `quad` \| `poly` (`linear`) | Fit method |
 | Regression | `polyOrder` | 1–5 (3) | Polynomial order (when `poly`) |
 | Radar | `filled` | boolean (true) | Fill the polygon |

docs/reference-chartjs.md

@@ -111,7 +111,11 @@ _No template-specific parameters._
 
 **Encoding channels:** `y`, `x`, `x2`, `color`, `column`, `row`
 
-_No template-specific parameters._
+| Parameter | Control | Domain | Default | Availability | Description |
+|---|---|---|---|---|---|
+| `taskHeight` | number | 40 – 90 (step 5) | `70` | always | Task bar height as a percentage of each row. |
+| `cornerRadius` | number | 0 – 8 (step 1) | `2` | always | Corner radius for supported marks. |
+| `intervalLabels` | toggle | on / off | `false` | always | Text shown on task intervals. |
 
 ## Line & Area
 
@@ -136,7 +140,7 @@ _No template-specific parameters._
 | Parameter | Control | Domain | Default | Availability | Description |
 |---|---|---|---|---|---|
 | `interpolate` | choice | Default (linear) _(default)_, `linear` (Linear), `monotone` (Monotone (smooth)) | — | always | Line or area interpolation method. |
-| `opacity` | number | 0.1 – 1 (step 0.05) | `0.4` | always | Mark opacity. |
+| `opacity` | number | 0.1 – 1 (step 0.05) | `0.4` | conditional | Mark opacity. |
 | `stackMode` | choice | Stacked (default) _(default)_, `layered` (Layered (overlap)) | — | always | Stacking strategy for overlapping series. |
 
 ### ![](chart-icon-range-area.svg) Range Area Chart

docs/reference-echarts.md

@@ -98,7 +98,7 @@ _No template-specific parameters._
 
 | Parameter | Control | Domain | Default | Availability | Description |
 |---|---|---|---|---|---|
-| `stackMode` | choice | Stacked (default) _(default)_, `normalize` (Normalize (100%)), `layered` (Layered (overlap)) | — | conditional | Stacking strategy for overlapping series. |
+| `stackMode` | choice | Stacked (default) _(default)_, `normalize` (Normalize (100%)) | — | conditional | Stacking strategy for overlapping series. |
 
 ### ![](chart-icon-lollipop.svg) Lollipop Chart
 
@@ -156,7 +156,7 @@ _No template-specific parameters._
 | Parameter | Control | Domain | Default | Availability | Description |
 |---|---|---|---|---|---|
 | `interpolate` | choice | Default (linear) _(default)_, `linear` (Linear), `monotone` (Monotone (smooth)), `step` (Step), `step-before` (Step Before), `step-after` (Step After) | — | always | Line or area interpolation method. |
-| `opacity` | number | 0.1 – 1 (step 0.05) | `0.7` | always | Mark opacity. |
+| `opacity` | number | 0.1 – 1 (step 0.05) | `0.7` | conditional | Mark opacity. |
 | `stackMode` | choice | Stacked (default) _(default)_, `normalize` (Normalize (100%)), `center` (Center), `layered` (Layered (overlap)) | — | always | Stacking strategy for overlapping series. |
 
 ### ![](chart-icon-streamgraph.svg) Streamgraph
@@ -274,7 +274,11 @@ _No template-specific parameters._
 
 **Encoding channels:** `y`, `x`, `x2`, `color`, `detail`, `column`, `row`
 
-_No template-specific parameters._
+| Parameter | Control | Domain | Default | Availability | Description |
+|---|---|---|---|---|---|
+| `taskHeight` | number | 40 – 90 (step 5) | `70` | always | Task bar height as a percentage of each row. |
+| `cornerRadius` | number | 0 – 8 (step 1) | `2` | always | Corner radius for supported marks. |
+| `intervalLabels` | toggle | on / off | `false` | always | Text shown on task intervals. |
 
 ### ![](chart-icon-bullet.svg) Bullet Chart