统计卡片

我们在0.11 的时候，做过一次dashboard，是依赖旧的一套实现机制，在0.16 之后，dashboard就被废弃了。新的工作台设计需要重新把dashboard 重新用起来。与之前最大不同的是：

之前是通过json配置通过上报的方式，现在需要在页面配置。
之前是dataAction 获取数据，现在需要基于新的机制（Logic/Flow）去获取。
新增自定义卡片

本次卡片类型支持：自定义卡片、指标图、柱状图、折线图、饼图、环形图、雷达图、漏斗图卡

注意⚠️：

数据获取所有Func/Flow 返回数据都是List<ChartOutput>，使用base业务域下的io.terminus.trantor.module.base.model.dashboard.ChartOutput返回
卡片配置的Flow、Func不支持接受参数，因此不支持筛选。

统计卡片

指标卡片

配置指标卡片

进入具体运行环境->仪表盘->卡片配置->新增统计卡片

其中：

所属业务域：调用逻辑流或逻辑函数所在业务域
卡片标题：在工作台显示卡片时的标题展示
单位：指标数据单位
所属应用：调用逻辑流或逻辑函数所在的应用
触发逻辑：枚举值，当前只支持逻辑流或逻辑函数

工作台配置卡片权限

用户需要配置工作台->卡片权限菜单。指定可见条件，目前支持全公司、指定角色、指定人员。

逻辑流和逻辑函数编写

如Func接口定义：

@Function(name = "ChartFunc")
public interface ChartFunc {
    List<ChartOutput> execute(QCompany qcompany);
}

实现为：

@FunctionImpl(name = "ChartFunc impl")
public class ChartFuncImpl implements ChartFunc {
    @Override
    public List<ChartOutput> execute(Company company) {
        ArrayList<ChartOutput> chartOutputs = new ArrayList<>();
        ChartOutput chartOutput = new ChartOutput();
        chartOutput.setValue(3L);
        chartOutput.setGroup("端点科技");
        chartOutput.setLabel("2021");

        ChartOutput chartOutput2 = new ChartOutput();
        chartOutput2.setValue(4L);
        chartOutput2.setGroup("阿里巴巴");
        chartOutput2.setLabel("2021");

        ChartOutput chartOutput3 = new ChartOutput();
        chartOutput3.setValue(2L);
        chartOutput3.setGroup("端点科技");
        chartOutput3.setLabel("2022");


        ChartOutput chartOutput4 = new ChartOutput();
        chartOutput4.setValue(1L);
        chartOutput4.setGroup("阿里巴巴");
        chartOutput4.setLabel("2022");

        chartOutputs.add(chartOutput);
        chartOutputs.add(chartOutput2);
        chartOutputs.add(chartOutput3);
        chartOutputs.add(chartOutput4);
        return chartOutputs;
    }
}

展示效果

进入个人工作台，添加指标卡片，展示效果如下图所示：

Flow、Func 返回数据与页面对应关系

ChartOutput 模型下有3个字段，分别是： group ：分组 label：标签 value：值页面关系为：

柱状图

配置，权限，逻辑流和逻辑函数定义与指标卡片一致，下面描述Flow、Func返回数据与页面对应关系。

折线图

配置，权限，逻辑流和逻辑函数定义与指标卡片一致，下面描述Flow、Func返回数据与页面对应关系。对应关系为

环形图

配置，权限，逻辑流和逻辑函数定义与指标卡片一致，下面描述Flow、Func返回数据与页面对应关系。

逻辑流和逻辑函数编写

如Func接口定义：

@Function(name = "CircularChartFunc")
public interface CircularChartFunc {
    List<ChartOutput> execute(Company company);
}

实现为：

@FunctionImpl(name = "CircularChartFuncImpl")
public class CircularChartFuncImpl implements CircularChartFunc {
    @Override
    public List<ChartOutput> execute(Company company) {
        ArrayList<ChartOutput> chartOutputs = new ArrayList<>();
        ChartOutput chartOutput = new ChartOutput();
        chartOutput.setValue(87L);
        chartOutput.setGroup("2021");
        chartOutputs.add(chartOutput);
        return chartOutputs;
    }
}

展示效果

饼图

配置，权限，逻辑流和逻辑函数定义与指标卡片一致，下面描述Flow、Func返回数据与页面对应关系。

逻辑流和逻辑函数编写

如Func接口定义：

@Function(name = "PieChartFunc")
public interface PieChartFunc {
    List<ChartOutput> execute(QCompany company);
}

实现为：

@FunctionImpl(name = "PieChartFuncImpl")
public class PieChartFuncImpl implements PieChartFunc {
    @Override
    public List<ChartOutput> execute(Company company) {
        ArrayList<ChartOutput> chartOutputs = new ArrayList<>();
        ChartOutput chartOutput = new ChartOutput();
        chartOutput.setValue(3L);
        chartOutput.setGroup("2021");

        ChartOutput chartOutput3 = new ChartOutput();
        chartOutput3.setValue(2L);
        chartOutput3.setGroup("2022");

        chartOutputs.add(chartOutput);
        chartOutputs.add(chartOutput3);
        return chartOutputs;
    }
}

展示效果

雷达图

配置，权限，逻辑流和逻辑函数定义与指标卡片一致，下面描述Flow、Func返回数据与页面对应关系。

逻辑流和逻辑函数编写

如Func接口定义：

@Function(name = "RadarChartFunc")
public interface RadarChartFunc {
    List<ChartOutput> execute(Company company);
}

实现为：

@FunctionImpl(name = "RadarChartChartFuncImpl")
public class RadarChartChartFuncImpl implements RadarChartFunc {
    @Override
    public List<ChartOutput> execute(Company company) {
        ArrayList<ChartOutput> chartOutputs = new ArrayList<>();
        ChartOutput chartOutput = new ChartOutput();
        chartOutput.setValue(3L);
        chartOutput.setGroup("端点科技");
        chartOutput.setLabel("2018");

        ChartOutput chartOutput1 = new ChartOutput();
        chartOutput1.setValue(2L);
        chartOutput1.setGroup("端点科技");
        chartOutput1.setLabel("2019");

        ChartOutput chartOutput2 = new ChartOutput();
        chartOutput2.setValue(1L);
        chartOutput2.setGroup("端点科技");
        chartOutput2.setLabel("2020");

        ChartOutput chartOutput3 = new ChartOutput();
        chartOutput3.setValue(2L);
        chartOutput3.setGroup("端点科技");
        chartOutput3.setLabel("2021");

        ChartOutput chartOutput4 = new ChartOutput();
        chartOutput4.setValue(1L);
        chartOutput4.setGroup("阿里巴巴");
        chartOutput4.setLabel("2018");

        ChartOutput chartOutput5 = new ChartOutput();
        chartOutput5.setValue(4L);
        chartOutput5.setGroup("阿里巴巴");
        chartOutput5.setLabel("2019");

        ChartOutput chartOutput6 = new ChartOutput();
        chartOutput6.setValue(4L);
        chartOutput6.setGroup("阿里巴巴");
        chartOutput6.setLabel("2020");

        ChartOutput chartOutput7  = new ChartOutput();
        chartOutput7.setValue(4L);
        chartOutput7.setGroup("阿里巴巴");
        chartOutput7.setLabel("2021");

        chartOutputs.add(chartOutput);
        chartOutputs.add(chartOutput1);
        chartOutputs.add(chartOutput2);
        chartOutputs.add(chartOutput3);
        chartOutputs.add(chartOutput4);
        chartOutputs.add(chartOutput5);
        chartOutputs.add(chartOutput6);
        chartOutputs.add(chartOutput7);
        return chartOutputs;
    }
}

展示效果

漏斗图

配置，权限，逻辑流和逻辑函数定义与指标卡片一致，下面描述Flow、Func返回数据与页面对应关系。

逻辑流和逻辑函数编写

接口定义如下：

@Function(name = "FunnelChartFunc")
public interface FunnelChartFunc {
    List<ChartOutput> execute(Company company);
}

实现代码为：

@FunctionImpl(name = "FunnelChartFuncImpl")
public class FunnelChartFuncImpl implements FunnelChartFunc {
    @Override
    public List<ChartOutput> execute(Company company) {
        ArrayList<ChartOutput> chartOutputs = new ArrayList<>();
        ChartOutput chartOutput = new ChartOutput();
        chartOutput.setValue(3L);
        chartOutput.setGroup("2021");

        ChartOutput chartOutput2 = new ChartOutput();
        chartOutput2.setValue(4L);
        chartOutput2.setGroup("2021");

        ChartOutput chartOutput3 = new ChartOutput();
        chartOutput3.setValue(2L);
        chartOutput3.setGroup("2022");

        ChartOutput chartOutput4 = new ChartOutput();
        chartOutput4.setValue(1L);
        chartOutput4.setGroup("2022");

        chartOutputs.add(chartOutput);
        chartOutputs.add(chartOutput2);
        chartOutputs.add(chartOutput3);
        chartOutputs.add(chartOutput4);
        return chartOutputs;
    }
}