Loading...
 
Skip to main content

Make PivotTable charts (plotly) responsive or map rendererOptions width and height from plugin params

  • Tracker item actions
Trackers
Items
Status
Open
Subject
Make PivotTable charts (plotly) responsive or map rendererOptions width and height from plugin params
Version
21.x
Category
  • Usability
  • Feature request
Feature
Charts and Data Visualization
UI / UX (User interface and experience)
Resolution status
New
Submitted by
Xavier de Pedro
Keep informed
Marc Laporte, Victor Emanouilov
Lastmod by
Xavier de Pedro
Rating
(0)
Description

I've made a page to display the Bug report evolution over time in dev.t.o, thanks to PluginPivotTable and dereived attributes of the dates, etc.

Charts are displayed, But the chart width seems to be hardcoded to 600px or similar, even if the PivotTable plugin params said width=100% initially, and I forced them to width=1000px, but no change. And in real world scenarios, with long dataset (like in the tiki community with the bug tracker 😊 visualization is too concetrated.(and I did not find an easy way to make a quarter aggregation of items, but that's another topic)

Searching a bit, this seems to be an issue already identified in other implementations of pivottable.js in other softwares:
https://github.com/nicolaskruchten/pivottable/issues/848

An easy solution/workaround might involve maping param rendererOptions inside pivottable .tpl (to set plotly width and height) to to the width and height indicated in the pivottable tiki plugin params.
See:
https://pivottable.js.org/examples/scatter.html

Copy to clipboard
...
rendererOptions: { plotly: {width: 600, height: 600} }
...


Probably below this chunk of code in wikiplugin_pivottable.tpl (lines 411-51) in trunk:

Copy to clipboard
...
			{{if $pivottable.heatmapParams}}
			rendererOptions: {
				heatmap: {
					colorScaleGenerator: function(values) {
						return Plotly.d3.scale.linear()
							.domain({{$pivottable.heatmapParams.domain|json_encode}})
							.range({{$pivottable.heatmapParams.colors|json_encode}});
					}
				}
			},
			{{/if}}
...


Importance
4
Easy to solve?
5
Priority
20
Demonstrate Bug on Tiki 19+
Demonstrate Bug (older Tiki versions)
Ticket ID
7315
Created
Saturday 07 March, 2020 11:09:22 UTC
by Xavier de Pedro
LastModif
Saturday 07 March, 2020 11:10:12 UTC


Show PHP error messages