Fixed Charts

Resources/Private/Templates/Roadmap.html

 {namespace roadmap=Tx_Typo3Roadmap_ViewHelpers}
-<h3>Charts</h3>
-<div id="charts" style="height: 300px;"></div>
-
 <div class="b-tabs">
 	<ul class="tabs lite-tabs">
 		<f:for each="{majors}" as="majorsTabs" key="keyTab" iteration="tabIteratorTabs">
@@ -11,9 +8,9 @@
 	<div class="tab-panes">
 		<f:for each="{majors}" as="major" key="key" iteration="tabIterator">
 			<a id="{ceUid}_{keyTab}"></a>
-			<div class="tab-content {f:if(condition: tabIterator.isFirst, then: 'lite-tab-panes-black show-tab', else: 'hide-tab')}">
+			<div class="tab-content {f:if(condition: tabIterator.isFirst, then: ' show-tab', else: 'hide-tab')}">
+				<h2>{major.title}</h2>
 				<f:format.html>{major.bodytext}</f:format.html>
-			</div>
 				<h3>Releases</h3>
 				<table class="contenttable-0">
 					<thead>
@@ -27,16 +24,40 @@
 					<f:for each="{major.minorversions}" as="minor">
 						<tr>
 							<td>{minor.version}</td>
-						<td>{minor.focus}</td>
-						<td>{minor.released}</td>
+							<td>
+								<f:if condition="{minor.link}">
+									<f:then>
+										<a href="{minor.link}">{minor.focus}</a>
+									</f:then>
+									<f:else>
+										{minor.focus}
+									</f:else>
+								</f:if>
+							</td>
+							<td>
+								<f:if condition="{minor.released} > 1">
+									<f:then>
+										Released: <f:format.date format="Y-m-d">@{minor.released}</f:format.date>
+									</f:then>
+									<f:else>
+										Estimated: <f:format.date format="Y-m-d">@{minor.estimated}</f:format.date>
+									</f:else>
+								</f:if>
+							</td>
 						</tr>
 					</f:for>
 					</tbody>
 				</table>
+			</div>
 		</f:for>
 	</div>
 </div>
 
+<h3>Support Times</h3>
+<div id="charts" style="height: 300px;"></div>
+<div id="legend"></div>
+<div id="exportContainer">Download Chart as</div>
+
 <h3>PHP Compatibility Chart</h3>
 <table border="1">
 	<thead>

pi1/class.tx_typo3roadmap_pi1.php

@@ -50,8 +50,8 @@ class tx_typo3roadmap_pi1 extends tslib_pibase
         'regular' => '#69A550',
         'security' => '#FF8700',
         'elts' => '#ffb767',
-        'sprint' => '#8C8C8C',
-        'stabilization' => '#bc0000'
+        'sprint' => '#e6e6e6',
+        'stabilization' => '#983030'
     ];
 
     /**
@@ -202,7 +202,7 @@ class tx_typo3roadmap_pi1 extends tslib_pibase
         $this->pageRenderer->addJsLibrary('amcharts_gantt', 'https://www.amcharts.com/lib/3/gantt.js');
         $this->pageRenderer->addJsLibrary('amcharts_lightheme', 'https://www.amcharts.com/lib/3/themes/light.js');
         $this->pageRenderer->addJsLibrary('amcharts_export', 'https://www.amcharts.com/lib/3/plugins/export/export.js');
-        $this->pageRenderer->addCssFile('https://www.amcharts.com/lib/3/plugins/export/export.css');
+//        $this->pageRenderer->addCssFile('https://www.amcharts.com/lib/3/plugins/export/export.css');
 
         $data = $this->generateChartArray($majorVersions);
         $this->view->assign('data', $data);
@@ -212,7 +212,7 @@ class tx_typo3roadmap_pi1 extends tslib_pibase
 		var chart = AmCharts.makeChart("charts", {
 			"type": "gantt",
 			"theme": "light",
-			"marginRight": 70,
+//			"marginRight": 70,
 			"period": "YYYY",
 			"dataDateFormat": "YYYY-MM-DD",
 			"columnWidth": 0.65,
@@ -245,9 +245,9 @@ class tx_typo3roadmap_pi1 extends tslib_pibase
 			"startDateField": "start",
 			"endDateField": "end",
 			"dataProvider": ' . json_encode($data) . ',
-			"valueScrollbar": {
-				"autoGridCount": true
-			},
+//			"valueScrollbar": {
+//				"autoGridCount": true
+//			},
 			"chartCursor": {
 				"cursorColor": "#55bb76",
 				"valueBalloonsEnabled": false,
@@ -259,7 +259,13 @@ class tx_typo3roadmap_pi1 extends tslib_pibase
 				"valueZoomable": true
 			},
 			"export": {
-				"enabled": true
+				"enabled": true,
+				"divId": "exportContainer",
+                "position": "bottom-right",
+                "fileName": "typo3-support-times",
+				"menu": [
+				    "PNG","PDF", "SVG"
+				]
 			}
 		});
         ';
@@ -347,7 +353,7 @@ class tx_typo3roadmap_pi1 extends tslib_pibase
                     'start' => $this->dateFromTimestamp($majorVersion['prioritysupport']),
                     'end' => $this->dateFromTimestamp($majorVersion['extendedsupport']),
                     'color' => $this->colors['elts'],
-                    'task' => 'Extended support'
+                    'task' => 'Extended support (optional)'
                 ];
             }
         }
@@ -355,25 +361,6 @@ class tx_typo3roadmap_pi1 extends tslib_pibase
         return $data;
     }
 
-    /**
-     * @param array $allVersions
-     * @param array $majorVersions
-     * @return string
-     *
-     * @deprecated Not used anymore
-     */
-    protected function renderPHPCompatibilityMatrix(array $allVersions, array $majorVersions)
-    {
-        $content = '<table border="1">';
-        $content .= '<tr>';
-        foreach ($allVersions as $index => $allVersion) {
-            $content .= '<td>' . $allVersion['version'] . '</td>';
-        }
-        $content .= '</tr>';
-        $content .= '</table>';
-        return $content;
-    }
-
     /**
      * @return tslib_fe
      */