Add highcharts as new chart engine for detail view

html/typo3conf/ext/ter_fe2/Classes/Domain/Model/Extension.php

@@ -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);
+    }
 }

html/typo3conf/ext/ter_fe2/Configuration/TypoScript/Default/setup.txt

@@ -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

html/typo3conf/ext/ter_fe2/Resources/Private/Templates/Extension/Show.html

@@ -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">

html/typo3conf/ext/ter_fe2/Resources/Public/Javascript/Default.js

-/**
- * 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
+});