Chart Widget 用于图表界面制作。 Chart DSL 文件放在 charts 目录中, 文件扩展名为 .chart.yao。

约定

1. 示例中约定应用根目录为 /data/app, 实际编写时需替换为应用根目录。
2. 使用 <> 标识自行替换的内容。 例如: icon-<图标名称>, 实际编写时应替换为: icon-foo, icon-bar ...

命名

DSL 文件命名:

1. 由 小写字母, 下划线 “_”, 横杠 "-" 组成,
2. 必须由 小写字母 开头,
3. Widget ID 为文件名称(不含扩展名), 如包含多级目录用 "." 替代 "\/"

路由

默认:

http://<IP|域名>:<YAO_PORT>/<管理后台路由前缀>/x/Chart/<Widget ID>

Query 参数:

http://<IP|域名>:<YAO_PORT>/<管理后台路由前缀>/x/Chart/<Widget ID>?<URLQuery Params>

图表数据交互。用于指定表检索、保存等操作的处理器，设置数据 Hook，绑定模型等

使用关联处理器指定图表数据读取、写入逻辑。

在关联处理器之前运行，一般用于处理参数表数据。

{
  "name": "::Pet Chart",
  "action": {
    "before:data": "scripts.stat.BeforeData",
    "data": {
      "process": "scripts.stat.Data",
      "default": ["2022-09-20"]
    },
    "after:data": "scripts.stat.AfterData"
  }
}

/data/app/scripts/stat.js Hook 脚本

/**
 * 在关联处理器 search 之前运行
 * @param query 查询参数
 * @param page 当前页面
 * @param pagesize 每页显示记录数
 */
function BeforeData(query) {
  return [query];
}

在关联处理器之后运行，一般用于处理结果集数据。

{
  "name": "::Pet Chart",
  "action": {
    "before:data": "scripts.stat.BeforeData",
    "data": {
      "process": "scripts.stat.Data",
      "default": ["2022-09-20"]
    },
    "after:data": "scripts.stat.AfterData"
  }
}

/data/app/scripts/stat.js Hook 脚本

/**
 * 在关联处理器 search 之后运行
 * @param result 处理器运行结果
 */
function AfterData(result) {
  return result;
}

图表界面布局。显示字段、筛选器、批量编辑等

图表界面头部布局。设置批量操作、导入配置等

{
  // 自定义操作按钮
  "actions": [
    {
      "title": "页面跳转", // 按钮名称
      "icon": "icon-airplay", // 按钮图标, 可用图标 https://feathericons.com/

      // 按钮响应操作 KEY: 执行动作, VALUE: 参数表
      "action": {
        "History.push": { "payload": "/404" }
      }
    },
    {
      "title": "云函数",
      "icon": "icon-cloud",
      "action": {
        // 调用 /data/app/services/foo.js 中定义的 function Bar(...args){} 方法
        "Service.foo": { "method": "Bar", "args": ["foo", "bar"] }
      }
    },
    {
      "title": "Studio 方法",
      "icon": "icon-layers",
      "action": {
        // 调用 /data/app/studio/hello.js 中定义的 function World(...args){} 方法
        // **仅开发模式下有效**
        "Studio.hello": { "method": "World", "args": ["hello", "world"] }
      }
    }
  ]
}

可用自定义操作 actions[*].action

图表筛选器。设置筛选条件和右上角操作按钮等

{
  // 支持筛选的字段清单
  "columns": [
    { "name": "名称", "width": 4 }, // name: fields.filter.<KEY>; width: 字段宽度, 24 栅格
    { "name": "状态", "width": 4 }
  ]
}

图表布局。设置显示，行操作按钮等

{
  "columns": [
    { "name": "宠物数量", "width": 6 }, // name: fields.chart 中定义的字段名称; width: 字段宽度, 24栅格
    { "name": "宠物类型", "width": 6 },
    { "name": "收入_折线图", "width": 24 }
  ]
}

图表字段定义。指定图表字段, 图表筛选器字段定义

图表筛选器字段定义

KEY: 筛选器字段名称, VALUE: 字段定义

{
  "医生": {
    "bind": "where.doctor_id.eq", // query 名称, 例: /api/__yao/chart/pet/search?where.doctor_id.eq=xxx

    // 用户输入组件
    "edit": {
      "type": "Select", // 组件名称, 可用组件参考文档 https://yaoapps.com/components

      // 组件参数表
      "props": {
        "placeholder": "请选择医生",
        "xProps": {
          // 在字段名称前加 $ 前缀, 并指定处理器，将自动将处理器解析为 API
          "$remote": {
            "process": "scripts.doctor.SelectOption",
            "query": { "limit": 200 }
          }
        }
      }
    }
  }
}

图表字段定义

KEY: 图表字段名称, VALUE: 字段定义

{
  "收入": {
    "bind": "income", // 绑定API接口返回字段名称

    // 字段数据呈现组件
    "view": {
      "type": "NumberChart", // 组件名称, 可用组件参考文档 https://yaoapps.com/components
      "link": "/x/Table/pet", // 链接地址

      // 数据数值计算
      // 参数表:
      //   $C(row) 当前行数据,
      //   $C(value) 当前行当前字段数值,
      //   $C(props) 当前组件 props,
      //   $C(type) 当前组件 type,
      //   $C(id) 当前 Widget ID
      //   'hello' 字符串常量
      //   1024 整形常量
      //   0.618 浮点型常量
      "compute": {
        "process": "Concat", // 处理器名称
        "args": ["$C(row.name)", "-", "$C(row.status)"]
      },

      "props": {
        "chartHeight": 150,
        "prefix": "¥",
        "decimals": 2,
        "nameKey": "date",
        "valueKey": "value"
      }
    }
  },
  "支出": {
    "bind": "cost",
    "link": "/x/Table/pet",
    "view": {
      "type": "NumberChart",
      "props": {
        "chartHeight": 150,
        "color": "red",
        "prefix": "¥",
        "decimals": 2,
        "nameKey": "date",
        "valueKey": "value"
      }
    }
  }
}

内建 Compute 处理器

图表界面配置项。图表满屏显示等配置

Chart Widget API

Chart Widget 处理器