How do I make a custom visualization resize to fill the panel, like the built-in visualizations do?
I've gone through this tutorial but I have only been able to hardcode the size. https://docs.splunk.com/Documentation/Splunk/6.5.3/AdvancedDev/CustomVizTutorial
You need to overwrite the reflow function. This is called when ever the visualisation is resized. You can get the new dimensions with the following code.
reflow: function() {
this.$el = $(this.el);
var container = this.$el[0];
var rect = container.getBoundingClientRect();
// rect.width, rect.height
}
For the example, you would probably need to redraw the SVG, so perhaps call the following with the new dimensions
// SVG setup
var svg = d3.select(this.el).append('svg')
.attr('width', width)
.attr('height', height)
.style('background', 'white')
.append('g')
.attr('transform', 'translate(' + width / 2 + ',' + height / 2 + ')');