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 ,

У меня возникли проблемы с интеграцией кода кубизма в мой обратный вызов. Я наткнулся на весь язык, как «Метрический аксессуар» и «Экстенты».

---

После долгих проб и ошибок, я бы получил одно значение рабочего, но вот вопросы, которые мне нужно исправить:

1. Там нет никакого фактического графика, только значение.
2. Мне нужен один горизонт для каждого набора данных.

Вот что она в настоящее время выглядит следующим образом:

А ниже мой полный код (это полимерный компонент). Основные изменения из «случайной» выборки включают:

1. Остановка и начало контекста. Я не знал, как еще держать его от тикания, пока я не получаю данные.

2. Вместо того, чтобы нажимать случайное число, нажмите одно из значений как 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 ... Я думаю.