prelert / kibana-swimlane-vis

Kibana swimlane visualization
Apache License 2.0
140 stars 41 forks source link

ability to change width of colour bands #20

Open mpaduada opened 7 years ago

mpaduada commented 7 years ago

Thanks for the plugin! I hope modest development/improvements will continue.

On that note, I have a feature request: Provide an option to adjust the width of the displayed colour bands. For cases in which there are a large number of buckets in the time field, the bands end up overlapping with some potentially confusing results.

In one of my use cases, I'm trying to use swim lane much like a Gantt chart. In particular, only one colour band should appear in a given time bucket (i.e., if there's a time band in one particular time bucket and row, that time bucket should be empty in all other rows). Instead, because the bands have a hard-coded width, the buckets that should be empty get filled in by adjacent bands. (See pasted example.)

screen shot 2017-04-26 at 11 02 48

mpaduada commented 7 years ago

In the meantime, could you advise how I might modify the visualization myself to change the hard-coded band width to a different value?

peteharverson commented 7 years ago

Many thanks for the feedback on the swimlane plugin. I hope to continue working on enhancements as time allows and will shortly post packaged release zip files for Kibana 5.3. We also welcome any contributions.

For this issue, maybe one alternative to using a fix width marker for the colour 'bands' would be to have it adjust automatically according to the aggregation interval selected in the dropdown?

In the meantime, if you wish to modify your local copy of the code, in prelert_swimlane_vis_controller.js look for the renderSwimlane function inside the prlSwimlaneVis directive block. If you look at the configuration of the series, one of the properties is the point radius:

series.points = { fillColor: color, show: true, radius: 5, symbol: drawChartSymbol, lineWidth: 1 };

So you can simply edit the radius from the default of 5 to something smaller. Here is an example where I have set it to 2 so points that were overlapping with the radius of 5 are now separate:

image

Hope that helps. I don't know how familiar you are with developing on Kibana? After making an edit to the code, you may need to delete the contents of the optimize directory below kibana and then restart kibana to get it to regenerate the webpack bundles so your change is picked up.

mpaduada commented 7 years ago

@peteharverson Thanks for the info. I'm not familiar with developing plugins for Kibana, but I'm not afraid to dive in and muck around with things. FWIW, Kibana rebuilds the bundles on its own on restart (at least for 5.3 and 5.4).

In case it's of any interest to you, I'm using the swimlane vis to produce a Gantt chart. Here's a screenshot: screen shot 2017-06-08 at 16 10 15

However, a bit document magic is needed to produce a Gantt chart. I have activity documents with start and end times, but that's not sufficient to produce a bar that spans those two times. So, I created a script (outside of ES) that creates a set of new documents at 60s intervals for each activity document. When I have a bit of time, I'll see if I can adapt the swimlane vis to scale the width for each individual band according to a field value (e.g., duration).

I do like your idea of adjusting the width based on the number of intervals in the underlying aggregation.

Thanks again for making a useful plugin and for the info!