@fui-org/fui-cli 1.3.1 → 2.0.0

package/skills/fui-skill/references/echart-templates.md

@@ -1,39 +1,35 @@
 # f-echart — Chart Type Templates & Real-World Patterns
 
-> File này sở hữu: **template `option` theo từng loại chart + pattern module.json đi kèm**. Import/props/config nền tảng xem [components-echart.md](components-echart.md).
-
-Thư viện template cho từng loại biểu đồ + các pattern dùng `f-echart` trong module.json. Load file này khi đã biết cần vẽ loại chart nào.
-
-> Nền tảng (import, props, config, theme, DataView, lỗi thường gặp): xem [components-echart.md](components-echart.md). **Luôn đọc file core trước** để biết cách import và cấu trúc `option`/`config`.
+> Owns: **`option` templates per chart type + matching module.json patterns**. Load once you know which chart to draw. **Read the core first** — import/props/config/theme/DataView/errors: [components-echart.md](components-echart.md).
 
 ---
 
 ## Templates — Chart types
 
-> Quy ước chung cho mọi template dưới đây: chỉ khai cạnh `grid` khi bố cục hoặc user yêu cầu khác mặc định; layout engine tự chừa chỗ theo title/legend. Cách phân biệt `grid` với `boundaryGap` và giá trị mặc định: [components-echart.md](components-echart.md) §Grid padding và boundaryGap. Legend khai kiểu `legend: {}` trong `option` sẽ **neo trên đầu** (dưới title); muốn nó xuống đáy thì `legend: { bottom: 0 }`, hoặc bật qua `config.legend: true` (mặc định của shortcut là đáy).
+> All templates: declare `grid` sides only for non-default layout (engine reserves title/legend space); `grid` vs `boundaryGap`: [components-echart.md](components-echart.md) §Grid padding vs boundaryGap. `legend: {}` in `option` **anchors top**; for bottom use `legend: { bottom: 0 }` or `config.legend: true`.
 
 ### Bar chart
 
 ```js
 // script.js — callback sau fetch
 vueData.chartOpt = {
-  xAxis: { type: 'category', data: d.data.map(r => r.thang) },
-  yAxis: { type: 'value' },
-  series: [{ type: 'bar', data: d.data.map(r => r.doanhThu), name: 'Doanh thu' }],
-  tooltip: { trigger: 'axis' },
-  legend: {}
+  xAxis: { type: "category", data: d.data.map((r) => r.thang) },
+  yAxis: { type: "value" },
+  series: [{ type: "bar", data: d.data.map((r) => r.doanhThu), name: "Doanh thu" }],
+  tooltip: { trigger: "axis" },
+  legend: {},
 };
 vueData.rows = d.data;
 ```
 
-### Line chart (có smooth)
+### Line chart (smooth)
 
 ```js
 vueData.chartOpt = {
-  xAxis: { type: 'category', data: d.data.map(r => r.thang) },
-  yAxis: { type: 'value' },
-  series: [{ type: 'line', data: d.data.map(r => r.val), smooth: true, areaStyle: {} }],
-  tooltip: { trigger: 'axis' }
+  xAxis: { type: "category", data: d.data.map((r) => r.thang) },
+  yAxis: { type: "value" },
+  series: [{ type: "line", data: d.data.map((r) => r.val), smooth: true, areaStyle: {} }],
+  tooltip: { trigger: "axis" },
 };
 ```
 
@@ -41,14 +37,14 @@ vueData.chartOpt = {
 
 ```js
 vueData.chartOpt = {
-  xAxis: { type: 'category', data: d.data.map(r => r.thang) },
-  yAxis: [{ name: 'VNĐ' }, { name: '%', position: 'right' }],
+  xAxis: { type: "category", data: d.data.map((r) => r.thang) },
+  yAxis: [{ name: "VNĐ" }, { name: "%", position: "right" }],
   series: [
-    { type: 'bar',  name: 'Doanh thu',   data: d.data.map(r => r.doanhThu),   yAxisIndex: 0 },
-    { type: 'line', name: 'Tăng trưởng', data: d.data.map(r => r.tangTruong), yAxisIndex: 1, smooth: true }
+    { type: "bar", name: "Doanh thu", data: d.data.map((r) => r.doanhThu), yAxisIndex: 0 },
+    { type: "line", name: "Tăng trưởng", data: d.data.map((r) => r.tangTruong), yAxisIndex: 1, smooth: true },
   ],
-  tooltip: { trigger: 'axis' },
-  legend: {}
+  tooltip: { trigger: "axis" },
+  legend: {},
 };
 ```
 
@@ -56,15 +52,15 @@ vueData.chartOpt = {
 
 ```js
 vueData.chartOpt = {
-  xAxis: { type: 'category', data: d.data.map(r => r.thang) },
-  yAxis: { type: 'value' },
+  xAxis: { type: "category", data: d.data.map((r) => r.thang) },
+  yAxis: { type: "value" },
   series: [
-    { type: 'bar', name: 'SP A', data: d.data.map(r => r.spA), stack: 'total' },
-    { type: 'bar', name: 'SP B', data: d.data.map(r => r.spB), stack: 'total' },
-    { type: 'bar', name: 'SP C', data: d.data.map(r => r.spC), stack: 'total' }
+    { type: "bar", name: "SP A", data: d.data.map((r) => r.spA), stack: "total" },
+    { type: "bar", name: "SP B", data: d.data.map((r) => r.spB), stack: "total" },
+    { type: "bar", name: "SP C", data: d.data.map((r) => r.spC), stack: "total" },
   ],
-  tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' } },
-  legend: {}
+  tooltip: { trigger: "axis", axisPointer: { type: "shadow" } },
+  legend: {},
 };
 ```
 
@@ -72,14 +68,16 @@ vueData.chartOpt = {
 
 ```js
 vueData.chartOpt = {
-  series: [{
-    type: 'pie',
-    data: d.data.map(r => ({ name: r.khoa, value: r.soLuong })),
-    radius: '70%',
-    label: { formatter: '{b}: {d}%' }
-  }],
-  tooltip: { trigger: 'item' },
-  legend: { bottom: 0 }
+  series: [
+    {
+      type: "pie",
+      data: d.data.map((r) => ({ name: r.khoa, value: r.soLuong })),
+      radius: "70%",
+      label: { formatter: "{b}: {d}%" },
+    },
+  ],
+  tooltip: { trigger: "item" },
+  legend: { bottom: 0 },
 };
 ```
 
@@ -89,12 +87,12 @@ Doughnut: `radius: ['40%', '70%']`
 
 ```js
 vueData.chartOpt = {
-  xAxis: { type: 'value', name: 'Điểm thi' },
-  yAxis: { type: 'value', name: 'GPA' },
-  series: [{ type: 'scatter', data: d.data.map(r => [r.diemThi, r.gpa, r.hoTen]), symbolSize: 8 }],
+  xAxis: { type: "value", name: "Điểm thi" },
+  yAxis: { type: "value", name: "GPA" },
+  series: [{ type: "scatter", data: d.data.map((r) => [r.diemThi, r.gpa, r.hoTen]), symbolSize: 8 }],
   tooltip: {
-    formatter: p => `${p.value[2]}<br>Điểm: ${p.value[0]} — GPA: ${p.value[1]}`
-  }
+    formatter: (p) => `${p.value[2]}<br>Điểm: ${p.value[0]} — GPA: ${p.value[1]}`,
+  },
 };
 ```
 
@@ -102,14 +100,17 @@ vueData.chartOpt = {
 
 ```js
 vueData.chartOpt = {
-  series: [{
-    type: 'gauge',
-    min: 0, max: 100,
-    data: [{ value: vueData.cpuPercent, name: 'CPU %' }],
-    detail: { formatter: '{value}%' },
-    axisLabel: { color: 'auto' }
-  }],
-  tooltip: {}
+  series: [
+    {
+      type: "gauge",
+      min: 0,
+      max: 100,
+      data: [{ value: vueData.cpuPercent, name: "CPU %" }],
+      detail: { formatter: "{value}%" },
+      axisLabel: { color: "auto" },
+    },
+  ],
+  tooltip: {},
 };
 ```
 
@@ -119,19 +120,24 @@ vueData.chartOpt = {
 vueData.chartOpt = {
   radar: {
     indicator: [
-      { name: 'Toán', max: 10 }, { name: 'Lý', max: 10 },
-      { name: 'Hóa', max: 10 }, { name: 'Văn', max: 10 }, { name: 'Anh', max: 10 }
-    ]
+      { name: "Toán", max: 10 },
+      { name: "Lý", max: 10 },
+      { name: "Hóa", max: 10 },
+      { name: "Văn", max: 10 },
+      { name: "Anh", max: 10 },
+    ],
   },
-  series: [{
-    type: 'radar',
-    data: d.data.map(r => ({
-      name: r.hoTen,
-      value: [r.toan, r.ly, r.hoa, r.van, r.anh]
-    }))
-  }],
+  series: [
+    {
+      type: "radar",
+      data: d.data.map((r) => ({
+        name: r.hoTen,
+        value: [r.toan, r.ly, r.hoa, r.van, r.anh],
+      })),
+    },
+  ],
   tooltip: {},
-  legend: {}
+  legend: {},
 };
 ```
 
@@ -139,17 +145,19 @@ vueData.chartOpt = {
 
 ```js
 // data: [{x: 'Mon', y: '8h', value: 5}, ...]
-const xData = [...new Set(d.data.map(r => r.x))];
-const yData = [...new Set(d.data.map(r => r.y))];
+const xData = [...new Set(d.data.map((r) => r.x))];
+const yData = [...new Set(d.data.map((r) => r.y))];
 vueData.chartOpt = {
-  xAxis: { type: 'category', data: xData },
-  yAxis: { type: 'category', data: yData },
+  xAxis: { type: "category", data: xData },
+  yAxis: { type: "category", data: yData },
   visualMap: { min: 0, max: 10, calculable: true },
-  series: [{
-    type: 'heatmap',
-    data: d.data.map(r => [xData.indexOf(r.x), yData.indexOf(r.y), r.value])
-  }],
-  tooltip: {}
+  series: [
+    {
+      type: "heatmap",
+      data: d.data.map((r) => [xData.indexOf(r.x), yData.indexOf(r.y), r.value]),
+    },
+  ],
+  tooltip: {},
 };
 ```
 
@@ -157,13 +165,15 @@ vueData.chartOpt = {
 
 ```js
 vueData.chartOpt = {
-  xAxis: { type: 'category', data: d.data.map(r => r.date) },
-  yAxis: { type: 'value', scale: true },
-  series: [{
-    type: 'candlestick',
-    data: d.data.map(r => [r.open, r.close, r.low, r.high])
-  }],
-  tooltip: { trigger: 'axis' }
+  xAxis: { type: "category", data: d.data.map((r) => r.date) },
+  yAxis: { type: "value", scale: true },
+  series: [
+    {
+      type: "candlestick",
+      data: d.data.map((r) => [r.open, r.close, r.low, r.high]),
+    },
+  ],
+  tooltip: { trigger: "axis" },
 };
 ```
 
@@ -171,13 +181,15 @@ vueData.chartOpt = {
 
 ```js
 vueData.chartOpt = {
-  series: [{
-    type: 'funnel',
-    data: d.data.map(r => ({ name: r.buoc, value: r.soLuong })).sort((a, b) => b.value - a.value),
-    label: { formatter: '{b}: {d}%' }
-  }],
-  tooltip: { trigger: 'item' },
-  legend: {}
+  series: [
+    {
+      type: "funnel",
+      data: d.data.map((r) => ({ name: r.buoc, value: r.soLuong })).sort((a, b) => b.value - a.value),
+      label: { formatter: "{b}: {d}%" },
+    },
+  ],
+  tooltip: { trigger: "item" },
+  legend: {},
 };
 ```
 
@@ -186,31 +198,35 @@ vueData.chartOpt = {
 ```js
 // data là hierarchical: { name, value, children: [...] }
 vueData.chartOpt = {
-  series: [{
-    type: 'treemap',
-    data: vueData.budgetTree,   // hierarchical array
-    roam: false,
-    leafDepth: 2,
-    label: { show: true }
-  }],
-  tooltip: {}
+  series: [
+    {
+      type: "treemap",
+      data: vueData.budgetTree, // hierarchical array
+      roam: false,
+      leafDepth: 2,
+      label: { show: true },
+    },
+  ],
+  tooltip: {},
 };
 ```
 
-### Tree (org chart, org tree)
+### Tree (org chart)
 
 ```js
 vueData.chartOpt = {
-  series: [{
-    type: 'tree',
-    data: [vueData.orgTree],    // single root node
-    orient: 'TB',               // 'LR' | 'TB' | 'RL' | 'BT'
-    expandAndCollapse: true,
-    initialTreeDepth: 2,
-    label: { position: 'top' },
-    leaves: { label: { position: 'bottom' } }
-  }],
-  tooltip: { trigger: 'item' }
+  series: [
+    {
+      type: "tree",
+      data: [vueData.orgTree], // single root node
+      orient: "TB", // 'LR' | 'TB' | 'RL' | 'BT'
+      expandAndCollapse: true,
+      initialTreeDepth: 2,
+      label: { position: "top" },
+      leaves: { label: { position: "bottom" } },
+    },
+  ],
+  tooltip: { trigger: "item" },
 };
 ```
 
@@ -219,14 +235,16 @@ vueData.chartOpt = {
 ```js
 // nodes: [{name: '...'}], links: [{source: '...', target: '...', value: N}]
 vueData.chartOpt = {
-  series: [{
-    type: 'sankey',
-    data: vueData.sankeyNodes,   // [{name: 'A'}, {name: 'B'}, ...]
-    links: vueData.sankeyLinks,  // [{source: 'A', target: 'B', value: 5}, ...]
-    emphasis: { focus: 'adjacency' },
-    lineStyle: { color: 'gradient' }
-  }],
-  tooltip: { trigger: 'item' }
+  series: [
+    {
+      type: "sankey",
+      data: vueData.sankeyNodes, // [{name: 'A'}, {name: 'B'}, ...]
+      links: vueData.sankeyLinks, // [{source: 'A', target: 'B', value: 5}, ...]
+      emphasis: { focus: "adjacency" },
+      lineStyle: { color: "gradient" },
+    },
+  ],
+  tooltip: { trigger: "item" },
 };
 ```
 
@@ -234,18 +252,20 @@ vueData.chartOpt = {
 
 ```js
 vueData.chartOpt = {
-  series: [{
-    type: 'graph',
-    layout: 'force',            // 'force' | 'circular' | 'none'
-    data: vueData.nodes,        // [{name, value, category}, ...]
-    links: vueData.edges,       // [{source, target}, ...]
-    categories: vueData.categories,  // [{name}, ...]
-    roam: true,
-    label: { show: true },
-    force: { repulsion: 1000 }
-  }],
+  series: [
+    {
+      type: "graph",
+      layout: "force", // 'force' | 'circular' | 'none'
+      data: vueData.nodes, // [{name, value, category}, ...]
+      links: vueData.edges, // [{source, target}, ...]
+      categories: vueData.categories, // [{name}, ...]
+      roam: true,
+      label: { show: true },
+      force: { repulsion: 1000 },
+    },
+  ],
   legend: {},
-  tooltip: {}
+  tooltip: {},
 };
 ```
 
@@ -254,14 +274,16 @@ vueData.chartOpt = {
 ```js
 // data: [{date: '2024-01-01', count: 5}, ...]
 vueData.chartOpt = {
-  calendar: { range: '2024', cellSize: ['auto', 20] },
-  visualMap: { min: 0, max: 30, type: 'piecewise', orient: 'horizontal', left: 'center' },
-  series: [{
-    type: 'heatmap',
-    coordinateSystem: 'calendar',
-    data: d.data.map(r => [r.date, r.count])
-  }],
-  tooltip: { formatter: p => `${p.value[0]}: ${p.value[1]}` }
+  calendar: { range: "2024", cellSize: ["auto", 20] },
+  visualMap: { min: 0, max: 30, type: "piecewise", orient: "horizontal", left: "center" },
+  series: [
+    {
+      type: "heatmap",
+      coordinateSystem: "calendar",
+      data: d.data.map((r) => [r.date, r.count]),
+    },
+  ],
+  tooltip: { formatter: (p) => `${p.value[0]}: ${p.value[1]}` },
 };
 ```
 
@@ -273,7 +295,7 @@ vueData.chartOpt = {
 // Zoom (trong option)
 vueData.chartOpt = {
   ...baseOpt,
-  dataZoom: [{ type: 'inside' }, { type: 'slider', height: 20 }]
+  dataZoom: [{ type: "inside" }, { type: "slider", height: 20 }],
 };
 // Hoặc dùng config shortcut:
 // config: { zoom: true }
@@ -285,49 +307,44 @@ vueData.chartOpt = {
 
 // Hoặc custom formatter trong option
 tooltip: {
-  formatter: p => {
-    const fmt = FEchartFormatter.build('currency', { symbol: '₫', decimals: 0 });
+  formatter: (p) => {
+    const fmt = FEchartFormatter.build("currency", { symbol: "₫", decimals: 0 });
     return `${p.name}: ${fmt(p.value)}`;
-  }
+  };
 }
 ```
 
 ---
 
-## Dataset + encode (khi cần map cột tùy ý)
+## Dataset + encode (arbitrary column mapping)
 
 ```js
 // script.js — build option dùng dataset (không map thủ công)
 vueData.chartOpt = {
   dataset: { source: vueData.rows },
   series: [
-    { type: 'bar',  name: 'Doanh thu', encode: { x: 'thang', y: 'doanhThu' } },
-    { type: 'line', name: 'Chi phí',   encode: { x: 'thang', y: 'chiPhi' }, yAxisIndex: 1 }
+    { type: "bar", name: "Doanh thu", encode: { x: "thang", y: "doanhThu" } },
+    { type: "line", name: "Chi phí", encode: { x: "thang", y: "chiPhi" }, yAxisIndex: 1 },
   ],
-  xAxis: { type: 'category' },
-  yAxis: [{}, { position: 'right' }],
-  tooltip: { trigger: 'axis' }
+  xAxis: { type: "category" },
+  yAxis: [{}, { position: "right" }],
+  tooltip: { trigger: "axis" },
 };
 ```
 
 ---
 
-## Patterns thực tế
-
-Hai pattern chính khi dùng `f-echart` trong module.json:
+## Real-world patterns
 
-| Pattern | Khi nào dùng |
-|---|---|
-| **Inline** — viết `option` thẳng vào attr | Chart đơn giản, data đã có trong `vueData`, không cần biến trung gian |
-| **vueData ref** — `option` build trong `script.js` | Data cần fetch từ API; option phức tạp; cần sort/transform trước khi render |
-
----
+| Pattern                                         | When                                                                |
+| ----------------------------------------------- | ------------------------------------------------------------------- |
+| **Inline** — `option` written directly in attr  | Simple chart, data already in `vueData`, no intermediate variable   |
+| **vueData ref** — `option` built in `script.js` | Data fetched from API; complex option; sort/transform before render |
 
-### Pattern 1 — Inline pie (không cần script.js)
+### Pattern 1 — Inline pie (no script.js)
 
-Khi data đã có trong `vueData.rows`, viết `option` thẳng vào attr — không cần biến `chartOpt` hay script.js.
+Data already in `vueData.rows` → `option` in the attr, no `chartOpt`/script.js.
 
-**module.json controls:**
 ```json
 {
   "el": "f-echart", "w": "6",
@@ -347,15 +364,10 @@ Khi data đã có trong `vueData.rows`, viết `option` thẳng vào attr — kh
 }
 ```
 
-> `vueData.rows` phải được gán trước (ví dụ: từ callback fetch của control khác trong cùng module).
-
----
+> `vueData.rows` must be assigned first (e.g. from another control's fetch callback in the same module).
 
 ### Pattern 2 — Inline horizontal bar
 
-Horizontal bar: đổi `xAxis`/`yAxis`, dùng `inverse: true` và `containLabel: true`.
-
-**module.json controls:**
 ```json
 {
   "el": "f-echart", "w": "12",
@@ -368,7 +380,7 @@ Horizontal bar: đổi `xAxis`/`yAxis`, dùng `inverse: true` và `containLabel:
         data: vueData.rows.map(r => r.tenKhoa),
         inverse: true
       },
-      grid: { containLabel: true },
+      grid: { containLabel: true },
       series: [{
         type: 'bar',
         data: vueData.rows.map(r => r.soLuong),
@@ -381,22 +393,16 @@ Horizontal bar: đổi `xAxis`/`yAxis`, dùng `inverse: true` và `containLabel:
 }
 ```
 
-**Lưu ý:**
-- `containLabel: true` trong `grid` — bắt buộc cho horizontal bar để nhãn `yAxis` không bị cắt.
-- Chỉ khai cạnh `grid` khi user yêu cầu khác mặc định; xem [components-echart.md](components-echart.md) — "Grid padding và boundaryGap".
-- `inverse: true` → item lớn nhất hiển thị ở trên cùng.
-- `height: Math.max(300, rows.length * 36)` — tự co dãn theo số hàng.
+- `grid.containLabel: true` — required so `yAxis` labels aren't clipped; other `grid` sides only if the user asks.
+- `inverse: true` → largest on top.
+- `height: Math.max(300, rows.length * 36)` scales with rows.
 
----
-
-### Pattern 3 — vueData ref + dynamic height (fetch từ API)
+### Pattern 3 — vueData ref + dynamic height (API fetch)
 
-Dùng khi option phức tạp hoặc data cần fetch từ API riêng.
-
-**module.json controls:**
 ```json
 {
-  "el": "f-echart", "w": "12",
+  "el": "f-echart",
+  "w": "12",
   "attr": {
     ":config": "{ title: 'Doanh thu theo tháng', height: 400, dataView: true }",
     ":option": "vueData.chartOpt"
@@ -405,35 +411,34 @@ Dùng khi option phức tạp hoặc data cần fetch từ API riêng.
 ```
 
 **script.js:**
+
 ```js
 // Trong callback fetch data
 vueData.rows = d.data.slice().sort((a, b) => a.thang.localeCompare(b.thang));
 vueData.chartOpt = {
-  xAxis: { type: 'category', data: vueData.rows.map(r => r.thang) },
+  xAxis: { type: "category", data: vueData.rows.map((r) => r.thang) },
   yAxis: [
-    { type: 'value', name: 'Triệu đồng', axisLabel: { formatter: v => FEchartFormatter.formatShort(v) } },
-    { type: 'value', name: '%', position: 'right', max: 100 }
+    { type: "value", name: "Triệu đồng", axisLabel: { formatter: (v) => FEchartFormatter.formatShort(v) } },
+    { type: "value", name: "%", position: "right", max: 100 },
   ],
   series: [
-    { type: 'bar',  name: 'Doanh thu', data: vueData.rows.map(r => r.doanhThu), yAxisIndex: 0 },
-    { type: 'line', name: 'Tăng trưởng', data: vueData.rows.map(r => r.tangTruong), yAxisIndex: 1, smooth: true }
+    { type: "bar", name: "Doanh thu", data: vueData.rows.map((r) => r.doanhThu), yAxisIndex: 0 },
+    { type: "line", name: "Tăng trưởng", data: vueData.rows.map((r) => r.tangTruong), yAxisIndex: 1, smooth: true },
   ],
   grid: { containLabel: true },
-  tooltip: { trigger: 'axis' },
-  legend: {}
+  tooltip: { trigger: "axis" },
+  legend: {},
 };
 ```
 
----
-
 ### Pattern 4 — Conditional option (null guard)
 
-Khi option được build từ nhiều nguồn data, dùng điều kiện để tránh render chart với data rỗng.
+Several data sources → guard against rendering empty data.
 
-**module.json controls:**
 ```json
 {
-  "el": "f-echart", "w": "12",
+  "el": "f-echart",
+  "w": "12",
   "attr": {
     ":config": "{ height: 350 }",
     ":option": "vueData.baseOpt ? Object.assign({}, vueData.baseOpt, { series: vueData.series }) : null"
@@ -442,35 +447,38 @@ Khi option được build từ nhiều nguồn data, dùng điều kiện để
 ```
 
 **script.js:**
+
 ```js
 // Base option — khởi tạo một lần
 vueData.baseOpt = {
-  xAxis: { type: 'category', data: [] },
-  yAxis: { type: 'value' },
-  tooltip: { trigger: 'axis' },
+  xAxis: { type: "category", data: [] },
+  yAxis: { type: "value" },
+  tooltip: { trigger: "axis" },
   legend: {},
-  grid: { containLabel: true }
+  grid: { containLabel: true },
 };
 
 // Khi fetch data xong — reactive update
-vueData.baseOpt.xAxis.data = d.data.map(r => r.thang);
+vueData.baseOpt.xAxis.data = d.data.map((r) => r.thang);
 vueData.series = d.data.map((r, i) => ({
-  type: 'bar', name: r.name, data: r.values, stack: 'total'
+  type: "bar",
+  name: r.name,
+  data: r.values,
+  stack: "total",
 }));
 // Object.assign trong :option tạo object mới → Vue trigger re-render
 ```
 
-> `Object.assign({}, base, override)` trong `:option` expression — tạo object mới mỗi lần evaluate, đảm bảo Vue detect change.
+> `Object.assign({}, base, override)` in `:option` yields a new object each evaluation, so Vue detects the change.
 
----
-
-### Pattern 5 — Chart không có DataView (phổ biến nhất)
+### Pattern 5 — No DataView (most common)
 
-Đa số chart production không cần DataView — bỏ `dataView` để gọn. Không cần `:data` prop (không tồn tại).
+Most production charts omit `dataView`. There is no `:data` prop.
 
 ```json
 {
-  "el": "f-echart", "w": "6",
+  "el": "f-echart",
+  "w": "6",
   "attr": {
     ":config": "{ height: 300 }",
     ":option": "vueData.pieOpt"
@@ -478,4 +486,4 @@ vueData.series = d.data.map((r, i) => ({
 }
 ```
 
-Chỉ thêm `dataView: true` vào config khi user cần xem bảng số liệu — DataView tự trích xuất từ `option`.
+Add `dataView: true` only when the user needs the data table (auto-extracted from `option`).