custom visualization template source src

visualization_source.js

define([
    'jquery',
    'underscore',
    'd3',
    'api/SplunkVisualizationBase',
    'api/SplunkVisualizationUtils'
],
function(
    $,
    _,
    d3,
    SplunkVisualizationBase,
    SplunkVisualizationUtils
) {
    // Extend from SplunkVisualizationBase
    return SplunkVisualizationBase.extend({
        // Override to respond to re-sizing events
        reflow: function() {
            // For example, re-draw when the panel gets resized?
            //this.invalidateUpdateView();
        },
        
        // Search data params
        getInitialDataParams: function() {
            return ({
                outputMode: SplunkVisualizationBase.RAW_OUTPUT_MODE,
                count: 1000000
            });
        },
        
        initialize: function() {
            console.log("initialize");
            SplunkVisualizationBase.prototype.initialize.apply(this, arguments);
            this.$el = $(this.el);
        },

        // Optionally implement to format data returned from search.
        // The returned object will be passed to updateView as 'data'
        formatData: function(data) {
            console.log("formatData");
            if(data.results.length < 1) {
                return false;
            }

            return data;
        },

        // Implement updateView to render a visualization.
        //  'data' will be the data object returned from formatData or from the search
        //  'config' will be the configuration property object
        updateView: function(data, config) {
            console.log("updateView");
            var that = this;

            if(!data) {
                return;
            }

            this.$el.find("svg").remove();

            function config_default(setting, default_value) {
                var value = config[that.getPropertyNamespaceInfo().propertyNamespace + setting];

                if(value === undefined) {
                    return default_value;
                }
                else {
                    value = value.trim();
                }

                if(value === "") {
                    return default_value;
                }

                return typeof default_value === "number" ? parseFloat(value) : value;
            }

            var margin = {
                top: 20,
                right: 10,
                bottom: 20,
                left: 10
            };

            // If you're using formatter.html
            //var width  = config_default("width",  that.$el.width() * 0.8),
            //    height = config_default("height", width * 0.8);
            
            var width  = 800,
                height = 600;

            var svg = d3.select(that.el)
                .append("svg")
                    .attr("width", width + margin.left + margin.right)
                    .attr("height", height + margin.top + margin.bottom)
                .append("g")
                    .attr("transform", "translate(" + [margin.left, margin.top] + ")");
            
        }
    });
});