{extends file=$smarty.const.SMARTY_LAYOUT_DASHBOARD_WIDGET_DEFAULT}

{block name="content"}
	{if $widget['data']['errorMessage']}
		<div class="messageDivContainer layout-inline">
			{message type='error' message=$widget['data']['errorMessage']}
		</div>
	{else}
		{$chart=$widget['data']['chart']}
		{if $chart->getTitle()}
			<h3 class="svg title">{$chart->getTitle()}</h3>
		{/if}
		<svg></svg>
		{if $chart->getTitle()}
			<div class="svg description">{$chart->getDescription()}</div>
		{/if}
	{/if}
{/block}


{block name="localJS"}
	{if !$widget['data']['errorMessage']}
		{$chart=$widget['data']['chart']}
		<script type="text/javascript">
			MVC.scheduleOnLoad(function() {
				// re-map TINA-data-format to nvd3's format
				var widgetData = {$chart->getDataSets()|json_encode}.map(function(o) {
					var ret = {};
					ret.key = o.attributes.label;
					ret.nonStackable = false;
					ret.values = o.data.map(function(v) {
						var val = {};
						val.x = v.n;
						val.y = v.v;
						return val;
					});
					return ret;
				});

				// add the actual graph
				nv.addGraph({
					generate: function() {
						var svgelm = d3.select('#{$widget.id} svg');
						var width = svgelm.node().getBoundingClientRect().width,
							height = svgelm.node().getBoundingClientRect().height;

						chart = nv.models.multiBarChart()
								.width(width)
								.height(height)
								.duration(500)
								.wrapLabels(false)
								.legendPosition('top')
								.useInteractiveGuideline(true);

						var si_prefix_formatter = d3.format('.1s'),
							integer_formatter = d3.format(',.1d');

						chart.yAxis.tickFormat(function(d) {
							if (d>=(Math.pow(10, 3)*0.95)) {
								return si_prefix_formatter(d);
							}
							return integer_formatter(d);
						});

						{if $chart->getDataSetsDisplayGrouping()=='clustered'}
							chart.showControls(false)
								.stacked(false);
						{elseif $chart->getDataSetsDisplayGrouping()=='stacked'}
							chart.showControls(false)
								.stacked(true);
						{elseif $chart->getDataSetsDisplayGrouping()=='clusteredAndStacked'}
							chart.showControls(true)
								.stacked(false);
						{/if}

						// use the "furious" legend type
						chart.legend.vers('furious');

						// when using useInteractiveGuideline, skip items with 0 values
						// @see https://github.com/novus/nvd3/blob/0562e9eeea4a8b50ad6a9a36008faa9de3474d30/src/tooltip.js#L60
						chart.interactiveLayer.tooltip.contentGenerator(function (d) {
							d.series = d.series
								.filter(function(v) {
									return Math.abs(v.value)>0.01;
								})
								.sort(function(a, b) {
									return b.value - a.value;
								});
							return nv.models.tooltip()._options.contentGenerator(d);
						})

						// render it
						var svg = svgelm.datum(widgetData);
						svg
							.transition().duration(0)
							.call(chart);

						return chart;
					},
					callback: function(chart) {
						// render the currency, if any was already specified
						{if $chart->getDisplayCurrency()}
							var text = d3.select('#{$widget.id} svg g.nv-y >g.nv-axis')
								.append('svg:text')
								.text("{$chart->getDisplayCurrency()}")
								.classed("currency", true)
								.attr('transform', 'translate(-5, 0)');
						{/if}

						dashboardController.dashboardElement.observe('widget:drop', function(evt) {
							dashboardController.dashboard.fireWindowResize();
						});

						// redraw on window resize
						nv.utils.windowResize(function() {
							var svgelm = d3.select('#{$widget.id} svg');
							var width = svgelm.node().getBoundingClientRect().width;

							chart
								.width(width);

							svgelm
								.attr('width', width)
								.transition().duration(0)
								.call(chart);
							});
						return chart;
					}
				});
			});
		</script>
	{/if}
{/block}
