Pubnub 和 Cubism.js

Question

我正在使用 pubnub 来支持我正在开发的仪表板。我所有的小部件都基于这样的代码：

Polymer({
    is: 'widget-horizon',
    properties: { ... },
    ready: function() {
        registerCallback(this.channel, function (data) {

        }); 
    }
});

然后当那个 pubnub 频道收到消息时，回调被调用并传递数据。对于这个特定的图表，数据看起来像这样：

{
    "id": "RegResponseTimes",
    "type": null,
    "timestamp": "2016-10-14T11:12:13.2313043-05:00",
    "data": [
        {
            "label": "Metric1",
            "Value": 0.05
        },
        {
            "label": "Metric2",
            "Value": 0.17
        }
    ]
}

现在我正在尝试开发一个基于 cubism.js 的小部件，但所有文档都针对拉取数据，更具体地说是使用 Cube 或 Graphite。

我在将立体主义代码集成到我的回调中时遇到了很多麻烦。我对 "Metric Accessor" 和 "Extents".

这样的所有语言都磕磕绊绊

经过多次试验和错误，我得到了一个有效的值，但这里是我需要解决的问题：

没有实际图表，只有数值。
每个数据集我需要一个水平线。

这是目前的样子：

下面是我的完整代码（它是一个聚合物组件）。 "random" 样本的主要变化包括：

正在停止和启动上下文。当我没有获取数据时，我不确定还有什么其他方法可以防止它滴答作响。

不是推送随机数，而是推送其中一个值作为 POC。

    </style>
    <strong id="widgetName">{{name}}</strong>
    <div id="chart1"></div>
</template>
<script>

    var data = [];

    Polymer({
        is: 'widget-horizon',
        properties: {
            dataid: {
                type: String
            },
            name: {
                type: String
            },
            gethistory: {
                type: Number
            },
            testvalue: {
                type: Number
            },
            isloading: {
                type: Boolean,
                value: true
            }
        },
        ready: function() {
            var self = this;
            subscribe(self.dataid);
            getHistory(self.dataid,self.gethistory);
            registerCallback(this.dataid, function (data) {
                context.start();
                var y = data.data[0];
                self.testvalue = y.Value;
                self.isloading = false;
            });

            var context = cubism.context()
                    .serverDelay(0)
                    .clientDelay(0)
                    .step(1e4)
                    .size(600);
            var foo = setval("foo");

            var chart = self.$$('#chart1');
            d3.select(chart).call(function(div) {
                div.append("div")
                        .attr("class", "axis")
                        .call(context.axis().orient("top"));
                div.selectAll(".horizon")
                        .data([foo])
                        .enter().append("div")
                        .attr("class", "horizon")
                        .call(context.horizon().extent([0, 120]));
                div.append("div")
                        .attr("class", "rule")
                        .call(context.rule());

            });


            function setval(name) {
                var value = 0,
                        values = [],
                        last;
                return context.metric(function(start, stop, step, callback) {
                    start = +start, stop = +stop;
                    if (isNaN(last)) last = start;
                    while (last < stop) {
                        last += step;
                        value = self.testvalue;
                        if (value != "") {
                            values.push(self.testvalue);
                            context.stop();
                        }
                    }
                    callback(null, values = values.slice((start - stop) / step));
                }, name);
            }

            context.on("focus", function(i) {
                d3.selectAll(".value").style("right", i == null ? null : context.size() - i + "px");
            });
        }
    });
</script>

Answer 1

我成功了。这是我的完整回调：

registerCallback(this.dataid, function (data) {
    if (self.isloading) {
        for (var i = 0; i < data.data.length; i++){
            datas[i] = setval(data.data[i].MessageBodyClassName);
        }

        d3.select(chart).call(function(div) {
            div.append("div")
                    .attr("class", "axis")
                    .call(context.axis().orient("top"));
            div.selectAll(".horizon")
                    .data(datas)
                    .enter().append("div")
                    .attr("class", "horizon")
                    .call(context.horizon().extent([0, 120]));
            div.append("div")
                    .attr("class", "rule")
                    .call(context.rule());

        });
    } else {
        for (var i = 0; i < data.data.length; i++){
            vals[data.data[i].MessageBodyClassName] = data.data[i].Value;
        }
    }
    context.start();
    self.isloading = false;
});

这里是转换后的 random 函数：

function setval(name) {
    var value = 0,
            values = [],
            last;
    return context.metric(function(start, stop, step, callback) {
        start = +start, stop = +stop;
        if (isNaN(last)) last = start;
        while (last < stop) {
            last += step;
            value = self.testvalue;
            if (value != "") {
                values.push(vals[name]);
                context.stop();
            }
        }
        callback(null, values = values.slice((start - stop) / step));
    }, name);
}

基本上我只是定义了一个全局 vals 数组，我用它来存储 pubnub 更新时的新值并使用 Metric Accessor 更新值...我猜。

Pubnub 和 Cubism.js

Pubnub and Cubism.js

javascript

d3.js

pubnub

cubism.js

polymer