Commit 12a8fc67 authored by Thomas Löffler's avatar Thomas Löffler

Add highcharts as new chart engine for detail view

parent b006bc70
Pipeline #1527 passed with stages
in 2 minutes and 47 seconds
......@@ -664,4 +664,30 @@ class Extension extends \T3o\TerFe2\Domain\Model\AbstractEntity
$this->setDownloads($downloads);
}
}
/**
* @param int $versionCount
* @return string
*/
public function getDownloadsByVersionsAsJson($versionCount = 6)
{
if (empty($this->versions)) {
return '';
}
$versions = [];
foreach ($this->versions as $version) {
/** @var \T3o\TerFe2\Domain\Model\Version $version */
$versions['release'][$version->getUploadDate()] = date('d-m-Y', $version->getUploadDate());
$versions['versions'][] = $version->getVersionString();
$versions['downloads'][] = $version->getAllDownloads();
}
ksort($versions['release']);
sort($versions['versions']);
sort($versions['downloads']);
$versions['release'] = array_splice($versions['release'], $versionCount * -1);
$versions['versions'] = array_splice($versions['versions'], $versionCount * -1);
$versions['downloads'] = array_splice($versions['downloads'], $versionCount * -1);
return json_encode($versions);
}
}
......@@ -104,23 +104,11 @@ config.tx_extbase.persistence.classes {
# ======================================================================
# Page object configuration of the extension "ter_fe2"
# ======================================================================
## jQuery
[globalVar = LIT:1 = {$plugin.tx_terfe2.libraries.jquery.load}]
page.includeJSFooterlibs.jquery = EXT:ter_fe2/Resources/Public/Javascript/jquery-1.6.2.min.js
[global]
## jqPlot
#[globalVar = LIT:1 = {$plugin.tx_terfe2.libraries.jqplot.load}]
page.includeCSS.jqplot = EXT:ter_fe2/Resources/Public/Javascript/jqPlot/jquery.jqplot.min.css
page.includeJSFooterlibs.highcharts = https://code.highcharts.com/highcharts.src.js
page.includeJSFooterlibs.highcharts.external = 1
## Default files
page.includeJSFooter.tx_terfe2 = EXT:ter_fe2/Resources/Public/Javascript/Default.js
page.includeJSFooter.jqplot1 = EXT:ter_fe2/Resources/Public/Javascript/jqPlot/jquery.jqplot.js
page.includeJSFooter.jqplot2 = EXT:ter_fe2/Resources/Public/Javascript/jqPlot/plugins/jqplot.highlighter.min.js
page.includeJSFooter.jqplot3 = EXT:ter_fe2/Resources/Public/Javascript/jqPlot/plugins/jqplot.cursor.min.js
page.includeJSFooter.jqplot4 = EXT:ter_fe2/Resources/Public/Javascript/jqPlot/plugins/jqplot.categoryAxisRenderer.min.js
#[global]
# ======================================================================
# Show review form only for allowed usergroup
......
......@@ -65,9 +65,12 @@
<h3>
<f:translate key="downloads_by_version" />
</h3>
<f:format.raw>
<terfe2:chart object="{extension}" method="downloadsByVersion" height="220" width="375" pointCount="{settings.defaultPointCount}" renderOnLoad="1" />
</f:format.raw>
<script type="text/javascript">
var versionChartData = {extension.downloadsByVersionsAsJson -> f:format.raw()};
</script>
<div id="versionChart">
</div>
</f:if>
</div>
<div class="col-md-4">
......
/**
* Returns default chart options
*
* @return object Chart options
*/
function getDefaultChartOptions() {
return {
axes: {
xaxis: {
renderer: $.jqplot.CategoryAxisRenderer
},
yaxis: {
min: 0,
numberTicks: 5,
tickOptions: {
formatString: '%d'
}
}
},
grid: {
drawGridLines: true,
gridLineColor: '#cccccc',
background: '#ffffff',
borderColor: '#4D4D4D',
borderWidth: 1.0,
shadow: false
},
highlighter: {
show: true,
sizeAdjust: 5,
tooltipLocation: 'n',
tooltipOffset: 6,
tooltipAxes: 'y'
},
cursor: {
show: false
}
};
}
(function($) {
/**
* Render chart
*
* @param boolean renderShy Render shy charts
* @return void
*/
$.fn.renderChart = function(renderShy) {
var containerId = $(this).attr('id');
if (!containerId || typeof(charts) === 'undefined' || typeof(charts[containerId]) === 'undefined') {
return;
}
var chart = charts[containerId];
if ((!renderShy && chart.isShy) || chart.isRendered) {
return;
}
var options = getDefaultChartOptions();
options.title = chart.options.title;
options.series = chart.options.series;
$.jqplot(containerId, chart.lines, options);
charts[containerId].isRendered = true;
}
/**
* Toggle extension row details
*
* @param mixed element Object or selector
* @return void
*/
$.fn.toggleExtensionDetails = function() {
var $element = $(this);
// Stop here without correct element
if (typeof($element) === 'undefined') {
return;
}
// Toggle elements
$toggleElement = $element.closest('.ter-toggle-from-here');
$toggleElement.find('.ter-toggle-hide').toggle();
$toggleElement.find('.ter-toggle-show').toggle();
// Render chart
var $chart = $toggleElement.find('.chart-container');
if (typeof($chart) !== 'undefined') {
$chart.renderChart(true);
}
}
})(jQuery);
jQuery(document).ready(function($) {
/**
* Process all charts
*/
$('div.chart-container').renderChart(false);
if (versionChartData) {
console.log(versionChartData);
/**
* Add click event handler to all toggle elements
*/
$('.ter-toggle').click(function(event) {
event.preventDefault();
$(this).toggleExtensionDetails();
});
Highcharts.chart( 'versionChart', {
chart: {
type: 'line'
},
title: {
text: 'Downloads by version'
},
xAxis: [
{categories: versionChartData.versions},
{categories: versionChartData.release, linkedTo: 0}
],
yAxis: {
title: {
text: 'Downloads'
}
},
plotOptions: {
line: {
dataLabels: {
enabled: true
},
enableMouseTracking: false
}
},
series: [ {
name: 'Downloads',
data: versionChartData.downloads
} ]
} );
}
/**
* Submit form after selecting selectbox option
*/
$("select.jsSubmit").change(function(){
$(this).closest("form").submit();
});
});
\ No newline at end of file
});
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment