Блог

У меня проблема с панелями мониторинга, я настроил свою панель мониторинга с помощью пользовательского приложения визуализации, но проблема, как видно, undefined во времени.

Если вы укажете диапазон дат в «Время ввода», это будет выглядеть примерно так.

Это также временная диаграмма, есть ли способ решить это?

Когда вы вставляете JavaScript в панель управления, ось x отображается как «неопределенная» в визуализации временной диаграммы.

Вот boxplot.js код:

 define(function(require, exports, module) {
  // Base class for custom views
  var _ = require("underscore");
  //var plotly = require("./plotly.box");
  var plotly = require("../plotly/plotly");
  var SimpleSplunkView = require("splunkjs/mvc/simplesplunkview");
  var BoxPlot = SimpleSplunkView.extend({
    className: "splunk-plotly-boxplot",
    options: {
      "managerid": null,
      "x_data": null,
      "y_data": null,
      "order": "asc",
      "text": null,
      /* test */
      "point_size": 25,
      "showlegend": true,
      "boxpoints": "Outliers",
      "autorange": false,
      "zeroline": false
    },
    output_mode: "json",
    initialize: function() {
      SimpleSplunkView.prototype.initialize.apply(this, arguments);
      $(window).resize(this, _.debounce(this._handleResize, 20));
    },
    _handleResize: function(e) {
      // e.data is the this pointer passed to the callback.
      // here it refers to this object and we call render()
      e.data.render();
    },
    createView: function() {
      this.$el.html("");
      // get the height and width from the options
      // and set the div container to that size
      var height = this.settings.get("height");
      var width = this.settings.get("width");
      this.$el.height(height);
      this.$el.width(width);
      return true;
    },
    render: function() {
      console.log("render");
    },
    formatData: function(data) {
      var formatted_data = [];
      var unique_x_data = [];
      var x_field = this.settings.get("x_data");
      var y_field = this.settings.get("y_data");
      var order = this.settings.get("order");
      var text_field = this.settings.get("text");
      x_header = _.keys(_.countBy(data, function(data) {
        return data[x_field];
      }));
      x_header.sort(function(a, b) {
        return a.localeCompare(b, undefined, {
          numeric: true,
          sensitivity: 'base'
        });
      });
      if (order === "desc") {
        x_header = x_header.reverse();
      }
      var grouped_data = _(data).groupBy(function(o) {
        return o[x_field];
      });
      for (var i = 0; i < x_header.length; i  ) {
        var result = {
          type: 'box',
          marker: {
            size: this.settings.get("point_size")
          },
          boxpoints: this.settings.get("boxpoints"),
          name: x_header[i],
          y: _.keys(_.countBy(grouped_data[x_header[i]], function(data) {
            return [data[y_field], data[text_field]];
          })).map(function(v, i, a) {
            return v.split(",")[0];
          }),
          text: _.keys(_.countBy(grouped_data[x_header[i]], function(data) {
            return [data[y_field], data[text_field]];
          })).map(function(v, i, a) {
            return v.split(",")[1];
          }),
          boxmean: 'sd'
        };
        formatted_data.push(result);
      }
      return formatted_data;
    },
    updateView: function(viz, data) {
      console.log("updateView");
      var height = this.settings.get("height");
      var width = this.settings.get("width");
      console.log(height);
      console.log(width);
      this.$el.height(height);
      this.$el.width(width);
      var that = this;
      var layout = {
        yaxis: {
          autorange: true,
          zeroline: true
        },
        showlegend: this.settings.get("showlegend")
      };
      that.$el.html("");
      var divId = this.$el.attr("id");
      plotly.newPlot(divId, data, layout, {
        displaylogo: false
      });
      return this;
    }
  });
  return BoxPlot;
});