fixes

Author: Chenglong-MS

py-src/data_formulator/agents/agent_data_rec.py

@@ -73,7 +73,6 @@
 | Regression | x, y, color, size, facet | regressionMethod ("linear","log","exp","pow","quad","poly"), polyOrder (2–10) |
 | Bar Chart | x, y, color, facet | cornerRadius (0–15) |
 | Grouped Bar Chart | x, y, group, facet | cornerRadius (0–15) |
-| Histogram | x, color, facet | binCount (5–50) |
 | Line Chart | x, y, color, strokeDash, facet | interpolate ("linear","monotone","step") |
 | Area Chart | x, y, color, facet | — |
 | Heatmap | x, y, color, facet | colorScheme ("viridis","blues","reds","oranges","greens","blueorange","redblue") |
@@ -87,9 +86,9 @@
 
 **Critical chart rules:**
 - **Scatter Plot**: good default for relationships/correlations. Use config opacity (0.1–1.0) for dense data instead of encoding opacity.
-- **Regression**: automatically overlays a trend line — do NOT compute regression in Python.
-- **Histogram**: only needs x encoding; values are auto-binned.
-- **Bar Chart**: same-x rows are automatically stacked. Use Grouped Bar Chart for side-by-side (group channel, not color).
+- **Regression**: automatically overlays a trend line — do NOT compute regression in Python. Use color to get separate trend lines per group.
+- **Bar Chart**: x=categorical, y=quantitative (vertical bars). Swap x↔y for horizontal bars. For histograms/distributions, bin the data in the Python step. Same-x rows are auto-stacked.
+- **Grouped Bar Chart**: use the group channel (not color) for side-by-side bars.
 - **Line Chart**: use strokeDash to differentiate line styles (e.g. actual vs forecast).
 - **Pie Chart**: use "size" channel (not "theta") for the wedge values. Avoid when >7–8 categories.
 - **Lollipop Chart**: like bar but with dot+line — cleaner for ranked comparisons.

src/lib/agents-chart/core/compute-layout.ts

@@ -687,8 +687,48 @@ export function computeChannelBudgets(
         : minStepVal;
 
     // --- 4. Per-channel budgets ---
-    const maxXToKeep = Math.floor(maxSubplotW / xMinGroupStep);
-    const maxYToKeep = Math.floor(maxSubplotH / yMinGroupStep);
+    let maxXToKeep = Math.floor(maxSubplotW / xMinGroupStep);
+    let maxYToKeep = Math.floor(maxSubplotH / yMinGroupStep);
+
+    // --- 5. Faceted-chart canvas cap ---
+    // Each subplot's step-based width/height must fit in the (un-stretched)
+    // canvas dimensions. Without this, a busy discrete axis produces
+    // subplots wider than the canvas, causing clipping.  Filtering values
+    // yields narrower subplots; we then re-derive the facet grid so more
+    // columns fit, reducing overall chart height.
+    if (facetGrid) {
+        const canvasXCap = Math.max(1, Math.floor(canvasSize.width / xMinGroupStep));
+        const canvasYCap = Math.max(1, Math.floor(canvasSize.height / yMinGroupStep));
+
+        if (maxXToKeep > canvasXCap || maxYToKeep > canvasYCap) {
+            maxXToKeep = Math.min(maxXToKeep, canvasXCap);
+            maxYToKeep = Math.min(maxYToKeep, canvasYCap);
+
+            // Re-derive facet grid with the tighter subplot size.
+            const colField = channelSemantics.column?.field;
+            const rowField = channelSemantics.row?.field;
+            const colCount = colField
+                ? new Set(data.map(r => r[colField])).size : 0;
+
+            if (colCount > 1 && !rowField) {
+                const tighterW = canvasXCap * xMinGroupStep;
+                const totalW = canvasSize.width * maxStretchVal - fixW;
+                const totalH = canvasSize.height * maxStretchVal - fixH;
+                const revisedMaxCols = Math.max(1, Math.floor(totalW / (tighterW + gap)));
+                const revisedMaxRows = Math.max(1, Math.floor(
+                    totalH / ((options.minSubplotSize ?? 60) + gap),
+                ));
+                const maxTotal = revisedMaxCols * revisedMaxRows;
+                const effectiveCount = Math.min(colCount, maxTotal);
+                const visRows = Math.ceil(effectiveCount / revisedMaxCols);
+                const visCols = Math.ceil(effectiveCount / visRows);
+
+                facetGrid.columns = visCols;
+                facetGrid.rows = visRows;
+                facetGrid.maxColumnValues = maxTotal;
+            }
+        }
+    }
 
     const hasRow = !!channelSemantics.row?.field;
     const maxFacetColumns = facetGrid?.maxColumnValues ?? Infinity;