@fui-org/fui-cli 1.3.2 → 2.1.0

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

@@ -1,489 +0,0 @@
-# f-echart — Chart Type Templates & Real-World Patterns
-
-> 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
-
-> 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: {},
-};
-vueData.rows = d.data;
-```
-
-### 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" },
-};
-```
-
-### Multi-series + Dual Y-axis
-
-```js
-vueData.chartOpt = {
-  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 },
-  ],
-  tooltip: { trigger: "axis" },
-  legend: {},
-};
-```
-
-### Stacked bar
-
-```js
-vueData.chartOpt = {
-  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" },
-  ],
-  tooltip: { trigger: "axis", axisPointer: { type: "shadow" } },
-  legend: {},
-};
-```
-
-### Pie chart
-
-```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 },
-};
-```
-
-Doughnut: `radius: ['40%', '70%']`
-
-### Scatter plot
-
-```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 }],
-  tooltip: {
-    formatter: (p) => `${p.value[2]}<br>Điểm: ${p.value[0]} — GPA: ${p.value[1]}`,
-  },
-};
-```
-
-### Gauge
-
-```js
-vueData.chartOpt = {
-  series: [
-    {
-      type: "gauge",
-      min: 0,
-      max: 100,
-      data: [{ value: vueData.cpuPercent, name: "CPU %" }],
-      detail: { formatter: "{value}%" },
-      axisLabel: { color: "auto" },
-    },
-  ],
-  tooltip: {},
-};
-```
-
-### Radar
-
-```js
-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 },
-    ],
-  },
-  series: [
-    {
-      type: "radar",
-      data: d.data.map((r) => ({
-        name: r.hoTen,
-        value: [r.toan, r.ly, r.hoa, r.van, r.anh],
-      })),
-    },
-  ],
-  tooltip: {},
-  legend: {},
-};
-```
-
-### Heatmap (Cartesian)
-
-```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))];
-vueData.chartOpt = {
-  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: {},
-};
-```
-
-### Candlestick (OHLC)
-
-```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" },
-};
-```
-
-### Funnel
-
-```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: {},
-};
-```
-
-### Treemap
-
-```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: {},
-};
-```
-
-### 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" },
-};
-```
-
-### Sankey
-
-```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" },
-};
-```
-
-### Graph (network)
-
-```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 },
-    },
-  ],
-  legend: {},
-  tooltip: {},
-};
-```
-
-### Calendar heatmap
-
-```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]}` },
-};
-```
-
----
-
-## Zoom + Tooltip format
-
-```js
-// Zoom (trong option)
-vueData.chartOpt = {
-  ...baseOpt,
-  dataZoom: [{ type: "inside" }, { type: "slider", height: 20 }],
-};
-// Hoặc dùng config shortcut:
-// config: { zoom: true }
-```
-
-```js
-// Tooltip tiền tệ — dùng config shortcut
-// config: { tooltipFormat: 'currency', symbol: '₫', decimals: 0 }
-
-// Hoặc custom formatter trong option
-tooltip: {
-  formatter: (p) => {
-    const fmt = FEchartFormatter.build("currency", { symbol: "₫", decimals: 0 });
-    return `${p.name}: ${fmt(p.value)}`;
-  };
-}
-```
-
----
-
-## 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 },
-  ],
-  xAxis: { type: "category" },
-  yAxis: [{}, { position: "right" }],
-  tooltip: { trigger: "axis" },
-};
-```
-
----
-
-## Real-world patterns
-
-| 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 (no script.js)
-
-Data already in `vueData.rows` → `option` in the attr, no `chartOpt`/script.js.
-
-```json
-{
-  "el": "f-echart", "w": "6",
-  "attr": {
-    ":config": "{ title: 'Cơ cấu sinh viên', height: 350 }",
-    ":option": "{
-      series: [{
-        type: 'pie',
-        data: vueData.rows.map(r => ({ name: r.khoa, value: r.soLuong })),
-        radius: ['40%', '70%'],
-        label: { formatter: '{b}: {d}%' }
-      }],
-      tooltip: { trigger: 'item', formatter: '{b}: {c} ({d}%)' },
-      legend: { bottom: 0 }
-    }"
-  }
-}
-```
-
-> `vueData.rows` must be assigned first (e.g. from another control's fetch callback in the same module).
-
-### Pattern 2 — Inline horizontal bar
-
-```json
-{
-  "el": "f-echart", "w": "12",
-  "attr": {
-    ":config": "{ height: Math.max(300, vueData.rows.length * 36) }",
-    ":option": "{
-      xAxis: { type: 'value' },
-      yAxis: {
-        type: 'category',
-        data: vueData.rows.map(r => r.tenKhoa),
-        inverse: true
-      },
-      grid: { containLabel: true },
-      series: [{
-        type: 'bar',
-        data: vueData.rows.map(r => r.soLuong),
-        name: 'Sinh viên',
-        label: { show: true, position: 'right' }
-      }],
-      tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' } }
-    }"
-  }
-}
-```
-
-- `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 (API fetch)
-
-```json
-{
-  "el": "f-echart",
-  "w": "12",
-  "attr": {
-    ":config": "{ title: 'Doanh thu theo tháng', height: 400, dataView: true }",
-    ":option": "vueData.chartOpt"
-  }
-}
-```
-
-**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) },
-  yAxis: [
-    { 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 },
-  ],
-  grid: { containLabel: true },
-  tooltip: { trigger: "axis" },
-  legend: {},
-};
-```
-
-### Pattern 4 — Conditional option (null guard)
-
-Several data sources → guard against rendering empty data.
-
-```json
-{
-  "el": "f-echart",
-  "w": "12",
-  "attr": {
-    ":config": "{ height: 350 }",
-    ":option": "vueData.baseOpt ? Object.assign({}, vueData.baseOpt, { series: vueData.series }) : null"
-  }
-}
-```
-
-**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" },
-  legend: {},
-  grid: { containLabel: true },
-};
-
-// Khi fetch data xong — reactive update
-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",
-}));
-// Object.assign trong :option tạo object mới → Vue trigger re-render
-```
-
-> `Object.assign({}, base, override)` in `:option` yields a new object each evaluation, so Vue detects the change.
-
-### Pattern 5 — No DataView (most common)
-
-Most production charts omit `dataView`. There is no `:data` prop.
-
-```json
-{
-  "el": "f-echart",
-  "w": "6",
-  "attr": {
-    ":config": "{ height: 300 }",
-    ":option": "vueData.pieOpt"
-  }
-}
-```
-
-Add `dataView: true` only when the user needs the data table (auto-extracted from `option`).

package/skills/fui-skill-cli/references/fastproject.md

@@ -1,99 +0,0 @@
-# FastProject (Core Framework)
-
-> Owns: **the `fastproject.js` bootstrapper: project/module init lifecycle**. Full script map: [script-map.md](script-map.md).
-
-`fastproject.js` initializes the app, builds UI from JSON config, and runs the logic engine.
-
-## Global State
-
-### vueData
-
-Central reactive state.
-
-- `p_domain`, `p_routers`, `p_params`: routing and environment.
-- `user`: current user.
-- `v_Set`: app settings (title, menu, attributes).
-- `v_Loading`: global loading state.
-
-### vueOBJ
-
-Vue instance config object.
-
-## Core Functions
-
-### loadModuleInfo()
-
-1. Load project and module settings.
-2. Build URL parameters.
-3. Fetch user info (if configured).
-4. Call `createModuleDom()`.
-
-### createModuleDom()
-
-1. Run initial data actions (`$moduleUI.data`).
-2. Generate HTML via `buildModuleUI`.
-3. Init Vue watchers and WebSocket connections.
-4. Mount the Vue instance.
-
-### buildModuleUI(controlsList, target)
-
-Recursively builds DOM from a JSON control list.
-
-- `controlsList` (Array): control definitions.
-- `target` (Object): binding target (usually `vueData`).
-- Returns: jQuery object with the generated HTML.
-
-### buildControl(controlsList, flex, target)
-
-`buildModuleUI` helper for individual controls.
-
-- Grid layout (`v-layout`, `v-flex`) and nested components.
-- Attribute binding and event mapping.
-
-### runAction(obj, includeData)
-
-Central logic engine; runs a JSON action sequence.
-
-- `obj` (Object|Array): action(s).
-- `includeData` (Object): context data.
-- Action types: `CONFIRM` (confirm dialog), `API` (call API), `CALL` (another action, recursive), `EXE` (raw JS), `FUN` (global function), `IF/THEN/ELSE`, `MESS`/`MESSBOX` (messages), `IN`/`OUT` (data mapping).
-
-### vueAction(objAction, includeData, callBack)
-
-Internal; runs a single action step for `runAction`.
-
-### callAPI(objApi, callBack, includeData)
-
-Runs an API call from a JSON action.
-
-- Handles `BEFORE`, `AFTER` actions, success/error callbacks.
-- Maps response into `vueData` when `OUT` is set.
-
-### mapData(map, target, src, includeData)
-
-Maps source → target by a mapping definition.
-
-- Cross-window mapping via `#PARENT` or window IDs.
-- `map` (Object|String): mapping; `target` (Object): destination; `src` (Object): source.
-
-### getVueData(key, src)
-
-Resolves a value from a key string; deep paths and template syntax (e.g. `{{user.Name}}`).
-
-### bindData(obj)
-
-Resolves all dynamic values in an object.
-
-### createWatch(obj)
-
-Vue watchers from JSON config; supports deep watch; runs actions on change.
-
-### loginFUN()
-
-Login redirect: opens a login window or redirects to the login page.
-
-### errorMess(code, message)
-
-Standard error message by HTTP status.
-
-- `code` (String|Number): HTTP status; `message` (String): custom message.