编辑代码

const VALUE = "VALUE" ; //值类型 (等于?)
const INTERVAL = "INTERVAL" ;   //区间类型 (区间内)
const SET = "SET" ; //集合类型  (等于)

//用于渲染公告栏的结构(作为DashboardLayout中state的一个字段)
const channel_list = [
    {
        id: "dsa45ds5a453as" ,    //uuid
        name: "帖子1" ,    //不可重复 input框
        type: VALUE ,   //select框
        remark: "我是描述" ,    //textArea
        value: ["劳劳劳"] , //现有的图表一个点击事件只能产生一个 明确 的值
    } ,
    {
        id: "dasd45ads45da" ,
        name: "帖子2" ,
        type: INTERVAL ,
        remark: "我是描述" ,    //textArea
        value: [10 , 1000] ,    //如何让点击图表事件能产生两个 明确 的值？？？
    } ,
    {
        id: "dsa45dsa4d5as4da" ,
        name: "帖子3" ,
        type: SET ,
        remark: "我是描述" ,    //textArea
        value: ["劳" , "丹" , "峰"] ,   //如何让点击图表事件能产生多个 明确 的值
    }
] ;

//当前被选中编辑的channel的id
const selected_channel_id = null ;

//所有对channel_list的修改 最终 都通过这个函数进行
const handleChangeOfChannelList = (new_channel_list) => {
    //this.setState({new_channel_list})
}

//增加一条帖子
const createChannel = ({
    id = "从getUuid()中获取" ,
    name = "从getUuid()中获取" ,    //默认为uuid
    type = VALUE ,  //默认为 VALUE
    value = null ,  //默认为空
}) => {
    //重名校验、类型判断等逻辑,若检查无误,则写进channel_list
    handleChangeOfChannelList([
        ...channel_list ,
        {id , name , type , value }
    ]) ;
}

//删除一条帖子
const deleteChannel = ({
    id
}) => {
    //在channel_list中找到该记录并删除(_.reject(channel_list , { id }))

    //调用handleChangeOfChannelList更新
}

//改动一条帖子
const updateChannel = (props) => {
    const {
        id , name , type , value
    } = props ;
    //根据该帖子的type来约束value的值,若不符合约束,则不允许修改
}

//改动一条帖子的value
const updateChannelValue = (props) => {
    const {
        id , value
    } = props ;
    //根据该帖子的type来约束value的值,若不符合约束,则不允许修改
}

/*主界面*/

//图表状态集合
const chart_card_list = [
    {
        name: "ThePieChart(发布者)" ,
        chart_data: {} ,
        //图表的行为
        chart_behavior: {
            //用于渲染图表内部的发布、订阅表单

            //发布表单
            publish: {
                //向何处诉说
                channel_list: [
                    {
                        channel_id: "dsa45ds5a453as" ,  //通过这个频道发布内容(图表的点击行为触发发布行为)
                    }
                ] ,    
            } ,
            //订阅表单
            subscribe: {
                //从何处聆听
                channel_list: [
                    {
                        channel_id: "dsa45ds5a453as" ,  //通过这个频道收听内容
                        column_list: [
                            //关联的数据列（维度和度量均可）
                            //dimension and metric
                        ]
                    }
                ] ,
            } ,

        }
    } ,
    {
        name: "TheLineChart(订阅者)" ,
        chart_data: {} ,
    }
] ;

//用于图表的更新公告栏的方法
const updateChannelValueFromChart = ({
    chart_card_id , //用于从chart_card_list中寻找到与之对应的publish的channel_list
    value
}) => {
    /*
        1.根据chart_card_id找到相应的chart_card ;
        2.遍历chart_card.chart_behavior.publish.channel_list,拿到每个channel_id
        3.根据channel_id调用updateChannelValue完成公告栏中值的更新
    */
}

const handleChangeOfChartBehavior = (chart_behavior) => {
    //用户通过BehaviorEditor的表单编辑所产生的数据都通过该函数回流
}

/*图表1(发布者)关注的内容 , 比如是一个饼图 (维度列为[部门A,部门B,部门C])*/
const ThePieChart = {
    props: {
        //数据
        chart_card_id , //将改图表的id传入(之前没有往图表内部传)
        
        //方法
        updateChannelValueFromChart ,  //往公告栏中某一区域更新value(图表被点击时取值并触发)
        /* !!!!对上述方法的补充!!!!
            在CardContent中有一个和图表钻取相关的方法handleClickChart,实现过程中请注意这两者的区分
        */
    }
} ;
//用于编辑图表专属的发布频道和订阅频道（主要以表单为主）
ThePieChart.BehaviorEditor = {
    props: {
        //数据
        channel_list ,   //全集(用于渲染select选择框)
        chart_behavior ,   //配合channel_list用于渲染图表内部部件BehaviorEditor

        //方法
        onChangeOfChartBehavior: handleChangeOfChartBehavior    //用户通过BehaviorEditor的表单编辑所产生的数据都通过该函数回流
    }
}

/*图表2(订阅者)关注的内容 , 比如是一个折线图 (维度列为[部门A,部门B,部门C,部门D])*/
const TheLineChart = {

} ;

TheLineChart.BehaviorEditor = {
    props: {
        
        //方法
    }
}