{
  "order": 17,
  "key": "stat-card",
  "type": "stat-card",
  "name": "指标卡",
  "description": "突出显示一个关键数字（如销售额、订单数、转化率），可带前后缀、万/亿换算、环比同比等对比和涨跌颜色，以及迷你趋势线",
  "tags": [
    "info",
    "指标卡",
    "KPI",
    "数字",
    "统计",
    "stat"
  ],
  "renderer": "stat",
  "group": "info",
  "icon": "solar:graph-up-bold",
  "usage_notes": [
    "默认数值仅用于演示，不是真实业务数据",
    "一个指标卡只显示一个指标，多个指标用多个指标卡并排",
    "百分比指标写成百分数，例如 4.2 表示 4.2%，后缀写 %",
    "对比的数值是变化量：正数上升、负数下降，前端按正负显示箭头；百分比变化写百分数，比率指标的变化后缀写“个百分点”",
    "成本、退款率、投诉量等越低越好的指标把 downIsGood 设为 true，涨跌颜色随之反过来",
    "数值、对比的变化量和趋势数据可以写 $query：数值和变化量的结果要一行一列，趋势数据只选一列",
    "迷你趋势线的 trend.data 是按时间先后排列的一组数字；trend.show 设为 true 才显示",
    "前缀、后缀、说明为空字符串时不显示；对比用 show 控制是否显示",
    "明细指标卡：rows 写按筛选字段汇总好的数据行（可写 $query），bind 把列绑定到字段，例如 {\"value\": \"calls\", \"compare.value\": \"calls_mom\", \"trend.data\": \"trend\"}；先按 filters 筛选，取第一行按 bind 覆盖对应字段",
    "rows 里每个筛选值只对应一行；趋势用数组列，例如 DuckDB 的 list(calls ORDER BY day) AS trend"
  ],
  "field_groups": [
    "node-base",
    {
      "key": "stat-content",
      "label": "指标",
      "description": "指标名、数值、前后缀和数值下方的补充说明",
      "fields": [
        {
          "path": "props.title",
          "label": "指标名",
          "description": "显示在数值上方的指标名称，是用户在大屏上看到的卡片名字",
          "value_type": "string",
          "aliases": [
            "标题",
            "名称",
            "指标名称",
            "卡片标题"
          ],
          "example": "label",
          "identifies": true
        },
        {
          "path": "props.value",
          "label": "数值",
          "description": "指标的数值，写原始数字；万/亿换算、小数位和千分位由数值格式控制",
          "value_type": "number",
          "aliases": [
            "数字",
            "指标值",
            "数据"
          ],
          "example": "data"
        },
        {
          "path": "props.prefix",
          "label": "前缀",
          "description": "数值前面的符号，例如 ¥；为空时不显示",
          "value_type": "string",
          "aliases": [
            "货币符号",
            "符号"
          ]
        },
        {
          "path": "props.suffix",
          "label": "后缀",
          "description": "数值后面的单位，例如 %、单、人；为空时不显示",
          "value_type": "string",
          "aliases": [
            "单位"
          ]
        },
        {
          "path": "props.detail",
          "label": "说明",
          "description": "数值下方的一行补充说明，例如“目标完成率 86%”；为空时不显示",
          "value_type": "string",
          "aliases": [
            "补充说明",
            "备注",
            "副标题",
            "描述"
          ]
        }
      ]
    },
    {
      "key": "stat-format",
      "label": "数值格式",
      "description": "数值的万/亿换算、小数位数、千分位和数字滚动动画",
      "fields": [
        {
          "path": "props.scale",
          "label": "大数单位",
          "description": "数值换算成万或亿后显示，单位字紧跟在数值后面、后缀前面；换算后至少保留三位有效数字",
          "value_type": "enum",
          "options": [
            {
              "value": "none",
              "label": "原值",
              "description": "不换算"
            },
            {
              "value": "auto",
              "label": "自动",
              "description": "1 亿及以上显示为亿，10 万及以上显示为万，更小的显示完整数字"
            },
            {
              "value": "wan",
              "label": "万"
            },
            {
              "value": "yi",
              "label": "亿"
            }
          ],
          "aliases": [
            "单位换算",
            "万元",
            "亿元",
            "数量级"
          ]
        },
        {
          "path": "props.precision",
          "label": "小数位",
          "description": "最多保留的小数位数，末尾的 0 不显示",
          "value_type": "integer",
          "minimum": 0,
          "maximum": 4,
          "aliases": [
            "精度",
            "小数位数",
            "保留几位小数"
          ]
        },
        {
          "path": "props.separator",
          "label": "千分位",
          "description": "整数部分是否每三位加逗号，例如 8,420",
          "value_type": "boolean",
          "aliases": [
            "千分位分隔符",
            "逗号"
          ]
        },
        {
          "path": "props.animate",
          "label": "数字动画",
          "description": "数值变化时从旧值滚动到新值",
          "value_type": "boolean",
          "aliases": [
            "滚动动画",
            "动画",
            "数字滚动"
          ]
        }
      ]
    },
    {
      "key": "stat-compare",
      "label": "对比",
      "description": "数值下方最多两项对比（如环比、同比），以及涨跌对应的好坏颜色",
      "fields": [
        {
          "path": "props.downIsGood",
          "label": "下降为好",
          "description": "指标越低越好时开启（成本、退款率等），下降显示好的颜色、上升显示坏的颜色",
          "value_type": "boolean",
          "aliases": [
            "越低越好",
            "反转涨跌颜色",
            "涨跌颜色反转"
          ]
        },
        {
          "path": "props.compare.show",
          "label": "显示对比1",
          "description": "是否显示第一项对比",
          "value_type": "boolean",
          "aliases": [
            "显示环比",
            "隐藏环比",
            "显示对比"
          ]
        },
        {
          "path": "props.compare.label",
          "label": "对比1名称",
          "description": "第一项对比的名称，例如 环比、较上月",
          "value_type": "string",
          "aliases": [
            "环比名称",
            "对比名称"
          ]
        },
        {
          "path": "props.compare.value",
          "label": "对比1数值",
          "description": "第一项对比的变化量，正数上升、负数下降，例如 12.5 配合后缀 % 显示为上升 12.5%",
          "value_type": "number",
          "aliases": [
            "环比",
            "环比数值",
            "增长率",
            "涨幅",
            "变化"
          ]
        },
        {
          "path": "props.compare.suffix",
          "label": "对比1后缀",
          "description": "第一项对比数值后的单位，例如 %、个百分点；为空时不显示",
          "value_type": "string",
          "aliases": [
            "环比单位"
          ]
        },
        {
          "path": "props.compare2.show",
          "label": "显示对比2",
          "description": "是否显示第二项对比",
          "value_type": "boolean",
          "aliases": [
            "显示同比",
            "隐藏同比"
          ]
        },
        {
          "path": "props.compare2.label",
          "label": "对比2名称",
          "description": "第二项对比的名称，例如 同比、较目标",
          "value_type": "string",
          "aliases": [
            "同比名称"
          ]
        },
        {
          "path": "props.compare2.value",
          "label": "对比2数值",
          "description": "第二项对比的变化量，正数上升、负数下降",
          "value_type": "number",
          "aliases": [
            "同比",
            "同比数值"
          ]
        },
        {
          "path": "props.compare2.suffix",
          "label": "对比2后缀",
          "description": "第二项对比数值后的单位，例如 %、个百分点；为空时不显示",
          "value_type": "string",
          "aliases": [
            "同比单位"
          ]
        }
      ]
    },
    {
      "key": "stat-trend",
      "label": "趋势线",
      "description": "卡片上的迷你趋势线：只看走势，不显示坐标轴和数值",
      "fields": [
        {
          "path": "props.trend.show",
          "label": "显示趋势线",
          "description": "是否显示迷你趋势线",
          "value_type": "boolean",
          "aliases": [
            "迷你图",
            "迷你趋势线",
            "走势图",
            "sparkline",
            "隐藏趋势线"
          ]
        },
        {
          "path": "props.trend.type",
          "label": "趋势图类型",
          "description": "迷你趋势线的画法",
          "value_type": "enum",
          "options": [
            {
              "value": "line",
              "label": "折线"
            },
            {
              "value": "area",
              "label": "面积"
            },
            {
              "value": "bar",
              "label": "柱状"
            }
          ],
          "aliases": [
            "趋势线样式",
            "迷你图类型"
          ]
        },
        {
          "path": "props.trend.position",
          "label": "趋势线位置",
          "description": "迷你趋势线放在哪里",
          "value_type": "enum",
          "options": [
            {
              "value": "right",
              "label": "数值右侧",
              "description": "卡片右侧约四成宽度"
            },
            {
              "value": "bottom",
              "label": "底部背景",
              "description": "铺满卡片底部，半透明地衬在文字后面"
            }
          ],
          "aliases": [
            "迷你图位置"
          ]
        },
        {
          "path": "props.trend.data",
          "label": "趋势数据",
          "description": "按时间先后排列的数值，例如近 6 个月每月的销售额；6~12 个点为宜",
          "value_type": "array",
          "item_type": "number",
          "panel": false,
          "aliases": [
            "走势数据",
            "迷你图数据",
            "趋势"
          ]
        },
        {
          "path": "style.trendColor",
          "label": "趋势线色",
          "description": "迷你趋势线的颜色，面积图的填充由它渐变到透明",
          "value_type": "color",
          "aliases": [
            "迷你图颜色",
            "走势颜色"
          ]
        }
      ]
    },
    {
      "key": "stat-style",
      "label": "样式",
      "description": "对齐方式、指标名和数值的颜色字号、好坏颜色、卡片背景和边框",
      "fields": [
        {
          "path": "style.textAlign",
          "label": "对齐",
          "description": "卡片内容的水平位置",
          "value_type": "enum",
          "options": [
            {
              "value": "left",
              "label": "左对齐"
            },
            {
              "value": "center",
              "label": "居中"
            },
            {
              "value": "right",
              "label": "右对齐"
            }
          ],
          "aliases": [
            "水平对齐",
            "对齐方式"
          ]
        },
        {
          "path": "style.titleColor",
          "label": "指标名色",
          "description": "指标名的颜色，对比名称和说明也用这个颜色",
          "value_type": "color",
          "aliases": [
            "标题颜色",
            "名称颜色"
          ],
          "themed": true
        },
        {
          "path": "style.titleFontSize",
          "label": "指标名字号",
          "description": "指标名的文字大小",
          "value_type": "number",
          "minimum": 8,
          "maximum": 72,
          "unit": "px",
          "aliases": [
            "标题字号",
            "标题大小"
          ]
        },
        {
          "path": "style.valueColor",
          "label": "数值色",
          "description": "数值、前缀和后缀的颜色",
          "value_type": "color",
          "aliases": [
            "数字颜色",
            "数值颜色"
          ],
          "themed": true
        },
        {
          "path": "style.valueFontSize",
          "label": "数值字号",
          "description": "数值的文字大小，前后缀按比例缩小",
          "value_type": "number",
          "minimum": 12,
          "maximum": 200,
          "unit": "px",
          "aliases": [
            "数字大小",
            "数值大小",
            "数字字号"
          ]
        },
        {
          "path": "style.goodColor",
          "label": "向好色",
          "description": "对比向好时的颜色：默认上升用它，开启下降为好后下降用它",
          "value_type": "color",
          "aliases": [
            "上涨颜色",
            "增长颜色",
            "正向颜色"
          ]
        },
        {
          "path": "style.badColor",
          "label": "变差色",
          "description": "对比变差时的颜色：默认下降用它，开启下降为好后上升用它",
          "value_type": "color",
          "aliases": [
            "下跌颜色",
            "下降颜色",
            "负向颜色"
          ]
        },
        {
          "path": "style.backgroundColor",
          "label": "背景色",
          "description": "卡片的背景颜色",
          "value_type": "color",
          "aliases": [
            "背景颜色",
            "底色",
            "卡片颜色"
          ],
          "themed": true
        },
        {
          "path": "style.borderColor",
          "label": "边框色",
          "description": "卡片 1px 边框的颜色，设为 transparent 不显示边框",
          "value_type": "color",
          "aliases": [
            "边框颜色",
            "描边颜色"
          ],
          "themed": true
        },
        {
          "path": "style.borderRadius",
          "label": "圆角",
          "description": "卡片四角的圆角半径",
          "value_type": "number",
          "minimum": 0,
          "maximum": 100,
          "unit": "px",
          "aliases": [
            "圆角大小",
            "边角"
          ]
        }
      ]
    },
    {
      "key": "stat-rows",
      "label": "数据行",
      "description": "按数据行显示指标：rows 是数据行，bind 把列绑定到指标卡字段，配合 filters 按变量取对应的一行",
      "fields": [
        {
          "path": "props.rows",
          "label": "数据行",
          "description": "对象数组，每行一组指标值，按 filters 的字段汇总好，每个筛选值一行；可以写 $query",
          "value_type": "array",
          "item_type": "object",
          "panel": false,
          "aliases": [
            "明细数据",
            "行数据"
          ]
        },
        {
          "path": "props.bind",
          "label": "列绑定",
          "description": "键是 props 下的字段路径（value、compare.value、compare2.value、trend.data 等），值是数据行的列名；有数据行时取筛选后的第一行，按它覆盖这些字段",
          "value_type": "object",
          "panel": false,
          "aliases": [
            "绑定",
            "字段绑定"
          ]
        }
      ]
    }
  ],
  "event_groups": [
    "dom-events"
  ],
  "rows_path": "props.rows",
  "schema": {
    "type": "stat-card",
    "name": "指标卡",
    "layout": {
      "x": 0,
      "y": 0,
      "width": 320,
      "height": 150
    },
    "props": {
      "title": "销售额",
      "value": 1286000,
      "prefix": "",
      "suffix": "",
      "detail": "",
      "scale": "auto",
      "precision": 2,
      "separator": true,
      "animate": true,
      "downIsGood": false,
      "compare": {
        "show": false,
        "label": "环比",
        "value": 0,
        "suffix": "%"
      },
      "compare2": {
        "show": false,
        "label": "同比",
        "value": 0,
        "suffix": "%"
      },
      "trend": {
        "show": false,
        "type": "area",
        "position": "right",
        "data": []
      },
      "rows": [],
      "bind": {}
    },
    "style": {
      "textAlign": "left",
      "titleFontSize": 14,
      "valueFontSize": 32,
      "goodColor": "#67c23a",
      "badColor": "#f56c6c",
      "borderRadius": 8,
      "trendColor": "#409eff"
    },
    "events": []
  }
}