仪表板

1.仪表盘

代码地址：trantor-example-dashboard

• Dashboard主要展示各角色下关键重要指标数据，协助业务分析数据提升工作效率。

• 当前统一工作台Dashboard版本仅支持限定范围内的卡片新增，方式为在代码中按照框架规则直接写入，扫描后在前台生成相应的卡片字段为扫代码注册上来，并在交付控制台进行维护管理

• Dashboard层级实为业务页面上的悬浮层，展示全局视角下的指标数据，机制上暂不支持业务页面引用和写入展示

2.支持类型

Dashboard目前支持的图表数据格式划分为两类

• 数据类：直接展示具体数值，样式为表格卡（整体和table的数据容器保持一致、差异体现在配置方面）

• 统计类：展示经过处理的数据，支持样式为柱状图、堆叠柱状图、折线图、多折线图、、漏斗图、饼图、极归图卡

当前支持的统计类图标依据以下抽象规则呈现，可满足大部分场景，不在该数据结构内的图表暂不支持

数据抽象：目前常见的图表的数据，都可以抽象为三个字段组成的数据结构（可大致理解为xyz三个坐标轴）

label：数据展示名
value：数据值
group：所属分组（区分多折线图、堆叠柱状图的字段）

2.1 Dashboard（全局视角）

undefined 目前支持的类型type的枚举如下：

View(表格)
LineChart(折线图)
Histogram(柱状图)
StackedHistogram(堆积柱状图)
PolarBar(极规图)（本期暂不支持）
PieChart(饼图)
FunnelChart(漏斗图)
RadarChart(雷达图)（本期暂不支持）

2.2数据类

View(表格)

表格.png

2.3 统计类

统计类目前提供了以下的卡片表现形式：

LineChart(折线图)

折线图.png

Histogram(柱状图)

柱状图.png

StackedHistogram(堆积柱状图)

堆积柱状图.png

PolarBar(极规图)（本期暂不支持）

极规图.png

PieChart(饼图)

饼图.png

FunnelChart(漏斗图)

漏斗图.png

RadarChart(雷达图)（本期暂不支持）

折线图.png

3.卡片定义

卡片的定义也按照类型不同，可以分为两部分.

Dashboard 卡片, 理论上也是模块内的资源, 跟 Action, I18N文本等基本类似, 使用 Json 的形式来配置, 同时也放置在模块资源目录下, 文件名可以用 {cardKey}-charts.json.

示例如下：

3.1.数据类

[
    {
      "name":"标准通知列表",                                             // 名称
      "title":"我的通知",                                               //  标题
      "desc":"描述信息",                                                //  描述
      "key":"user_notice_list",                                       // 唯一标示
      "actionKey":"demo_module_MyNoticeAction",                       // 这里描述的是View Action的Key
      "unit":"单位",                                                   //  坐标单位
      "type":"View",                                                  //  卡片类型，数据类就是View
      "query":{
          "registryType":{                                       //  字段名称
            "label":"注册类型",                             //  标签，前端显示用
            "type":"MultiDictionary",                     //  查询组件类型
            "queryActionkey":"user_center_RegistryType"   //  字典key
          }
        }
    }
]

这里的actionKey为View Action，具体的View Action说明与实现，参考这里

注意，只有type为View类型的卡片，对应的actionKey是View Action实现

3.2.统计类

[
    {
      "name":"标准用户数量雷达图",                                               // 名称
      "title":"用户数量雷达图",                                                 //  标题
      "key":"userType_radar",                                                // 唯一标示
      "desc":"描述信息",                                                      //  描述
      "actionKey":"demo_module_UserTypeChartDataAction",                    // 这里描述的是ChartDataAction
      "unit":"单位",                                                        //  坐标单位
      "type":"LineChart",                                                  //  卡片类型，数据类就是View
      "config":{
        "query":{
          "registryType":{                                     //  字段名称
            "label":"注册类型",                           //  标签，前端显示用
            "type":"MultiDictionary",                    //  查询组件类型
            "queryActionkey":"user_center_RegistryType"  //  字典key
          }
        }
      }
    }
]

这里的actionKey为实现了ChartDataAction的Server Action

type：

表示卡片类型，目前支持的类型如 支持类型—>Dashboard（全局视角） 中所示

query：用来声明界面可用的参数条件, 比如数据查询的时间段, 选择数据类型等。目前考虑支持如下类型：

Text
Float
Integer
Dictionary
MultiDictionary
Date
DateRange
Time
TimeRange
DateTime
DateTimeRange

info

query中的queryActionkey是针对Dictionary和MultiDictionary的配置，本意上就是字典的资源key

4.ChartDataAction

ChartDataAction是为了支持统计类卡片而提供的，卡片中的actionKey，需要一个对应的Server Action实现，来完成数据的聚合处理。目前常见的图表的数据, 其实都可以抽象为三个字段, 分别为:

label: 数据展示名
value: 数据值
group: 所属分组, 就是用来区分多线图, 多柱图的字段

4.1.定义

ChartDataAction的接口跟MultiDataAction类似，需要实现一个load方法来进行数据的处理

public interface ChartDataAction {
     ChartDataResult load(ChartDataParams chartDataParams);
}

ChartDataResult是数据返回的载体，内部是一个DashboardChartItem的列表，DashboardChartItem的内部实现就是很简单的三个字段

public class DashboardChartItem extends BaseModel<Long> {

    private static final long serialVersionUID = 6291347968206352465L;

    @TModelField(name = "标签")
    private String label;

    @TModelField(name = "值")
    private Long value;

    @TModelField(name = "分组")
    private String group;
}

用户处理完数据后，数据填充到DashboardChartItem列表中返回即可。

4.2.使用

业务需要自己实现ChartDataAction接口，来处理对应的数据统计。简单的demo如下：

@Component
public class StackedHistogramChartDataAction implements ChartDataAction {

    @Override
    public ChartDataResult load(ChartDataParams chartDataParams) {

        ChartDataResult chartDataResult = new ChartDataResult();
        List<DashboardChartItem> result = new ArrayList<>();
        DashboardChartItem item = new DashboardChartItem();
        item.setGroup("2020-07-16");
        item.setLabel("水果");
        item.setValue(432L);
        result.add(item);

        DashboardChartItem item0 = new DashboardChartItem();
        item0.setGroup("2020-07-16");
        item0.setLabel("药品");
        item0.setValue(42L);
        result.add(item0);

        DashboardChartItem item1 = new DashboardChartItem();
        item1.setGroup("2020-07-15");
        item1.setLabel("水果");
        item1.setValue(2312L);
        result.add(item1);

        DashboardChartItem item11 = new DashboardChartItem();
        item11.setGroup("2020-07-16");
        item11.setLabel("药品");
        item11.setValue(212L);
        result.add(item11);

        chartDataResult.setData(result);
        return chartDataResult;
    }
}

交付控制台配置

上报元数据之后，按照下面配置

交付控制台配置

统一工作台配置及查看

启动项目之后，去统一工作台查看

交付控制台配置