fix chart transform problem

.gitignore

@@ -14,6 +14,9 @@ build/
 coverage/
 .nyc_output/
 
+# Experiment outputs (source, inputs, and manifests stay tracked)
+experiments/*
+
 # Logs
 npm-debug.log*
 yarn-debug.log*

CHANGELOG.md

@@ -11,6 +11,14 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## [0.4.1] - 2026-07-27
+
+### Changed
+
+- Introduced Flint's faceted flint-shard visual identity across the project
+  README and website, including a public SVG favicon and a compact hero-title
+  lockup.
+
 ## [0.4.0] - 2026-07-24
 
 ### Added
@@ -170,7 +178,8 @@ 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.4.0...HEAD
+[Unreleased]: https://github.com/microsoft/flint-chart/compare/0.4.1...HEAD
+[0.4.1]: https://github.com/microsoft/flint-chart/compare/0.4.0...0.4.1
 [0.4.0]: https://github.com/microsoft/flint-chart/compare/0.3.0...0.4.0
 [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

README.md

@@ -1,4 +1,4 @@
-# Flint: A Visualization Language for the AI Era
+<h1><img src="assets/flint-logo.svg" alt="" width="42" align="absmiddle"> Flint: A Visualization Language for the AI Era</h1>
 
 [![npm: flint-chart](https://img.shields.io/npm/v/flint-chart.svg?label=npm%3A%20flint-chart)](https://www.npmjs.com/package/flint-chart)
 [![npm: flint-chart-mcp](https://img.shields.io/npm/v/flint-chart-mcp.svg?label=npm%3A%20flint-chart-mcp)](https://www.npmjs.com/package/flint-chart-mcp)

docs/reference-chartjs.md

@@ -125,7 +125,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. |
+| `interpolate` | choice | Default (linear) _(default)_, `linear` (Linear), `monotone` (Monotone (smooth)), `step` (Step), `step-before` (Step Before), `step-after` (Step After), `basis` (Basis (smooth)), `cardinal` (Cardinal), `catmull-rom` (Catmull-Rom) | — | always | Line or area interpolation method. |
 
 ### ![](chart-icon-bump.svg) Bump Chart
 
@@ -145,7 +145,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. |
+| `interpolate` | choice | Default (linear) _(default)_, `linear` (Linear), `monotone` (Monotone (smooth)), `step` (Step), `step-before` (Step Before), `step-after` (Step After), `basis` (Basis (smooth)), `cardinal` (Cardinal), `catmull-rom` (Catmull-Rom) | — | always | Line or area interpolation method. |
 | `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. |
 

docs/reference-echarts.md

@@ -134,7 +134,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. |
+| `interpolate` | choice | Default (linear) _(default)_, `linear` (Linear), `monotone` (Monotone (smooth)), `step` (Step), `step-before` (Step Before), `step-after` (Step After), `basis` (Basis (smooth)), `cardinal` (Cardinal), `catmull-rom` (Catmull-Rom) | — | always | Line or area interpolation method. |
 | `showPoints` | toggle | on / off | `false` | always | Overlay point markers on the line. |
 
 ### ![](chart-icon-bump.svg) Bump Chart
@@ -155,7 +155,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. |
+| `interpolate` | choice | Default (linear) _(default)_, `linear` (Linear), `monotone` (Monotone (smooth)), `step` (Step), `step-before` (Step Before), `step-after` (Step After), `basis` (Basis (smooth)), `cardinal` (Cardinal), `catmull-rom` (Catmull-Rom) | — | always | Line or area interpolation method. |
 | `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. |
 

docs/reference-plotly.md

@@ -181,7 +181,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. |
+| `interpolate` | choice | Default (linear) _(default)_, `linear` (Linear), `monotone` (Monotone (smooth)), `step` (Step), `step-before` (Step Before), `step-after` (Step After), `basis` (Basis (smooth)), `cardinal` (Cardinal), `catmull-rom` (Catmull-Rom) | — | always | Line or area interpolation method. |
 | `showPoints` | toggle | on / off | `false` | always | Overlay point markers on the line. |
 
 ### ![](chart-icon-area.svg) Area Chart
@@ -190,7 +190,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. |
+| `interpolate` | choice | Default (linear) _(default)_, `linear` (Linear), `monotone` (Monotone (smooth)), `step` (Step), `step-before` (Step Before), `step-after` (Step After), `basis` (Basis (smooth)), `cardinal` (Cardinal), `catmull-rom` (Catmull-Rom) | — | always | Line or area interpolation method. |
 | `opacity` | number | 0.1 – 1 (step 0.05) | `0.4` | always | Mark opacity. |
 | `stackMode` | choice | Stacked (default) _(default)_, `normalize` (Normalize (100%)), `layered` (Layered (overlap)) | — | conditional | Stacking strategy for overlapping series. |
 

docs/zh-CN/reference-plotly.md

@@ -177,7 +177,7 @@ _无模板专用参数。_
 
 | 参数 | 控件 | 取值范围 | 默认值 | 可用性 | 说明 |
 |---|---|---|---|---|---|
-| `interpolate` | choice | Default (linear) _(default)_, `linear` (Linear), `monotone` (Monotone (smooth)), `step` (Step), `step-before` (Step Before), `step-after` (Step After) | — | always | 线或区域的插值方式。 |
+| `interpolate` | choice | Default (linear) _(default)_, `linear` (Linear), `monotone` (Monotone (smooth)), `step` (Step), `step-before` (Step Before), `step-after` (Step After), `basis` (Basis (smooth)), `cardinal` (Cardinal), `catmull-rom` (Catmull-Rom) | — | always | 线或区域的插值方式。 |
 | `showPoints` | toggle | on / off | `false` | always | 在线上叠加点标记。 |
 
 ### ![](chart-icon-area.svg) Area Chart
@@ -186,7 +186,7 @@ _无模板专用参数。_
 
 | 参数 | 控件 | 取值范围 | 默认值 | 可用性 | 说明 |
 |---|---|---|---|---|---|
-| `interpolate` | choice | Default (linear) _(default)_, `linear` (Linear), `monotone` (Monotone (smooth)) | — | always | 线或区域的插值方式。 |
+| `interpolate` | choice | Default (linear) _(default)_, `linear` (Linear), `monotone` (Monotone (smooth)), `step` (Step), `step-before` (Step Before), `step-after` (Step After), `basis` (Basis (smooth)), `cardinal` (Cardinal), `catmull-rom` (Catmull-Rom) | — | always | 线或区域的插值方式。 |
 | `opacity` | number | 0.1 – 1 (step 0.05) | `0.4` | always | 标记不透明度。 |
 | `stackMode` | choice | Stacked (default) _(default)_, `normalize` (Normalize (100%)), `layered` (Layered (overlap)) | — | conditional | 重叠系列的堆叠策略。 |
 

packages/flint-js/package.json

@@ -1,6 +1,6 @@
 {
   "name": "flint-chart",
-  "version": "0.4.0",
+  "version": "0.4.1",
   "description": "Semantic-level visualization library that compiles data + semantic types for Vega-Lite, ECharts, Chart.js, Plotly, and Excel.",
   "keywords": [
     "visualization",

packages/flint-js/src/chartjs/assemble.ts

@@ -34,7 +34,7 @@ import {
 import type { ChartWarning } from '../core/types';
 import { applyEncodingOverrides } from '../core/encoding-overrides';
 import { applyAggregation } from '../core/aggregate';
-import { applyPivot, PivotSurface } from '../core/pivot';
+import { applyPivot, applyTransform, type PivotSurface, type TransformSurface } from '../core/pivot';
 import { cjsGetTemplateDef } from './templates';
 import { resolveChannelSemantics, convertTemporalData } from '../core/resolve-semantics';
 import { computeZeroDecision } from '../core/semantic-types';
@@ -109,17 +109,22 @@ export function assembleChartjs(input: ChartAssemblyInput): any {
             : { ...enc, type: prelimSemantics[ch]?.type };
     }
 
-    const pivoted = applyPivot(chartTemplate, typedRawEncodings, data, chartProperties, cjsGetTemplateDef);
-    if (pivoted.chartType && pivoted.chartType !== chartType) {
-        const swapped = cjsGetTemplateDef(pivoted.chartType) as ChartTemplateDef | undefined;
+    // Transform (derived Category-B operator): same two-control model as VL —
+    // chartProperties.chartType (θ) + chartProperties.arrange (τ/σ/γ). Legacy
+    // composed `pivot` ids are migrated inside applyTransform. See
+    // design-docs/chart-transform-two-axes.md.
+    const authoredTemplate = chartTemplate;
+    const transformed = applyTransform(chartTemplate, typedRawEncodings, data, chartProperties, cjsGetTemplateDef);
+    if (transformed.chartType && transformed.chartType !== chartType) {
+        const swapped = cjsGetTemplateDef(transformed.chartType) as ChartTemplateDef | undefined;
         if (swapped) chartTemplate = swapped;
     }
 
     // Compose Category-B encoding-action overrides (stored by the host in
-    // chartProperties, keyed by action key) onto the post-pivot encodings before
-    // any pipeline phase runs. Flint owns the transform; the host only stores
-    // the override value. See applyEncodingOverrides / EncodingActionDef.
-    const encodings = applyEncodingOverrides(chartTemplate, pivoted.encodings, chartProperties);
+    // chartProperties, keyed by action key) onto the post-transform encodings
+    // before any pipeline phase runs. Flint owns the transform; the host only
+    // stores the override value. See applyEncodingOverrides / EncodingActionDef.
+    const encodings = applyEncodingOverrides(chartTemplate, transformed.encodings, chartProperties);
 
     // Optional aggregation transform — see vegalite/assemble for rationale.
     data = applyAggregation(encodings, data);
@@ -429,19 +434,31 @@ export function assembleChartjs(input: ChartAssemblyInput): any {
 
     cjsConfig._dataLength = values.length;
 
-    if (pivoted.surface) {
-        cjsConfig._pivot = pivoted.surface;
+    if (transformed.surface) {
+        cjsConfig._transform = transformed.surface;
+    }
+    // Legacy single-control surface for getChartjsPivot — enumerated from the
+    // authored template so ids/labels match the pre-split contract.
+    const legacyPivot = applyPivot(authoredTemplate, typedRawEncodings, data, chartProperties, cjsGetTemplateDef);
+    if (legacyPivot.surface) {
+        cjsConfig._pivot = legacyPivot.surface;
     }
 
     return cjsConfig;
 }
 
-/** Inspect the Chart.js view transformation surface for an input. */
+/** Inspect the Chart.js legacy (composed) view transformation surface for an input. */
 export function getChartjsPivot(input: ChartAssemblyInput): PivotSurface | undefined {
     const spec = assembleChartjs(input);
     return spec && spec._pivot ? (spec._pivot as PivotSurface) : undefined;
 }
 
+/** Inspect the Chart.js two-control transform surface for an input. */
+export function getChartjsTransform(input: ChartAssemblyInput): TransformSurface | undefined {
+    const spec = assembleChartjs(input);
+    return spec && spec._transform ? (spec._transform as TransformSurface) : undefined;
+}
+
 /**
  * Round a [min, max] interval outward to "nice" round numbers so a shared facet
  * axis lands its endpoints on clean tick values (mirrors Vega-Lite's default

packages/flint-js/src/chartjs/index.ts

@@ -18,7 +18,7 @@
  */
 
 // CJS assembly function
-export { assembleChartjs, getChartjsPivot } from './assemble';
+export { assembleChartjs, getChartjsPivot, getChartjsTransform } from './assemble';
 
 // CJS spec instantiation (Phase 2)
 export { cjsApplyLayoutToSpec, cjsApplyTooltips } from './instantiate-spec';

packages/flint-js/src/chartjs/templates/area.ts

@@ -58,6 +58,10 @@ export const cjsAreaChartDef: ChartTemplateDef = {
         const tension = (interpolate === 'monotone' || interpolate === 'basis' ||
                          interpolate === 'cardinal' || interpolate === 'catmull-rom')
             ? 0.4 : 0;
+        const stepped = interpolate === 'step' ? 'middle' as const
+                      : interpolate === 'step-before' ? 'before' as const
+                      : interpolate === 'step-after' ? 'after' as const
+                      : false;
 
         const palette = getChartJsPalette(ctx, 'color');
 
@@ -133,6 +137,7 @@ export const cjsAreaChartDef: ChartTemplateDef = {
                     borderColor,
                     backgroundColor: bgColor,
                     tension,
+                    stepped,
                     fill: stacked ? 'stack' : 'origin',
                     pointRadius: 2,
                 });
@@ -154,6 +159,7 @@ export const cjsAreaChartDef: ChartTemplateDef = {
                 borderColor: getSeriesBorderColor(palette, 0),
                 backgroundColor: getSeriesBackgroundColor(palette, 0, opacity),
                 tension,
+                stepped,
                 fill: 'origin',
                 pointRadius: 2,
             });
@@ -170,6 +176,12 @@ export const cjsAreaChartDef: ChartTemplateDef = {
                 { value: undefined, label: 'Default (linear)' },
                 { value: 'linear', label: 'Linear' },
                 { value: 'monotone', label: 'Monotone (smooth)' },
+                { value: 'step', label: 'Step' },
+                { value: 'step-before', label: 'Step Before' },
+                { value: 'step-after', label: 'Step After' },
+                { value: 'basis', label: 'Basis (smooth)' },
+                { value: 'cardinal', label: 'Cardinal' },
+                { value: 'catmull-rom', label: 'Catmull-Rom' },
             ],
         } as ChartPropertyDef,
         {