Use local amcharts

Classes/Controller/RoadmapController.php

@@ -77,12 +77,12 @@ class RoadmapController extends \TYPO3\CMS\Extbase\Mvc\Controller\ActionControll
      */
     protected function renderCharts($majorVersions)
     {
-        $this->pageRenderer->addJsLibrary('amcharts', 'https://www.amcharts.com/lib/3/amcharts.js');
-        $this->pageRenderer->addJsLibrary('amcharts_serial', 'https://www.amcharts.com/lib/3/serial.js');
-        $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->addJsLibrary('amcharts', 'EXT:typo3_roadmap/Resources/Public/JavaScript/amcharts.min.js');
+        $this->pageRenderer->addJsLibrary('amcharts_serial', 'EXT:typo3_roadmap/Resources/Public/JavaScript/serial.min.js');
+        $this->pageRenderer->addJsLibrary('amcharts_gantt', 'EXT:typo3_roadmap/Resources/Public/JavaScript/gantt.min.js');
+        $this->pageRenderer->addJsLibrary('amcharts_lightheme', 'EXT:typo3_roadmap/Resources/Public/JavaScript/lighttheme.min.js');
+        $this->pageRenderer->addJsLibrary('amcharts_export', 'EXT:typo3_roadmap/Resources/Public/JavaScript/export.min.js');
+        $this->pageRenderer->addCssFile('EXT:typo3_roadmap/Resources/Public/Css/export.css');
 // @TODO comment css
         $data = $this->generateChartArray($majorVersions);
         $this->view->assign('data', $data);

Resources/Public/JavaScript/gantt.min.js

+(function () {
+	var b = window.AmCharts;
+	b.AmGanttChart = b.Class({
+		inherits: b.AmSerialChart, construct: function (a) {
+			this.type = "gantt";
+			b.AmGanttChart.base.construct.call(this, a);
+			this.cname = "AmGanttChart";
+			this.period = "ss";
+			this.maxZoomFactor = 1E6
+		}, initChart: function () {
+			this.dataChanged && this.processGanttData();
+			b.AmGanttChart.base.initChart.call(this)
+		}, parseData: function () {
+			b.AmSerialChart.base.parseData.call(this);
+			this.parseSerialData(this.ganttDataProvider)
+		}, processGanttData: function () {
+			var a;
+			this.graphs = [];
+			var v = this.dataProvider;
+			this.ganttDataProvider = [];
+			var z = this.categoryField, C = this.startField, D = this.endField, E = this.durationField, F = this.startDateField,
+				G = this.endDateField, w = this.colorField, q = b.extractPeriod(this.period), f = q.period, q = q.count,
+				r = this.dataDateFormat, t = b.getDate(this.startDate, r, "fff");
+			this.categoryAxis.gridPosition = "start";
+			a = this.valueAxis;
+			this.valueAxes = [a];
+			var A;
+			"date" == a.type && (A = !0);
+			a.minimumDate && (a.minimumDate = b.getDate(a.minimumDate, r, f));
+			a.maximumDate && (a.maximumDate = b.getDate(a.maximumDate, r, f));
+			isNaN(a.minimum) || (a.minimumDate = b.changeDate(new Date(t), f, a.minimum, !0, !0));
+			isNaN(a.maximum) || (a.maximumDate = b.changeDate(new Date(t), f, a.maximum, !0, !0));
+			if (v) for (a = 0; a < v.length; a++) {
+				var e = v[a], l = {};
+				l[z] = e[z];
+				var x = e[this.segmentsField], u;
+				this.ganttDataProvider.push(l);
+				e = e[w];
+				this.colors[a] || (this.colors[a] = b.randomColor());
+				if (x) for (var g = 0; g < x.length; g++) {
+					var d = x[g], c = d[C], h = d[D], m = d[E];
+					isNaN(c) && (c = u);
+					isNaN(m) || (h = c + m);
+					var m = "start_" + a + "_" + g, y = "end_" + a + "_" + g;
+					l[m] = c;
+					l[y] = h;
+					var n = "lineColor color alpha fillColors description bullet customBullet bulletSize bulletConfig url labelColor dashLength pattern gap className".split(" "),
+						k, p;
+					for (p in n) k = n[p] + "Field", (u = this.graph[k]) && void 0 !== d[u] && (l[n[p] + "_" + a + "_" + g] = d[u]);
+					u = h;
+					if (A) {
+						k = b.getDate(d[F], r, f);
+						var B = b.getDate(d[G], r, f);
+						t && (isNaN(c) || (k = b.changeDate(b.newDate(t, "fff"), f, c * q, !0, !0)), isNaN(h) || (B = b.changeDate(b.newDate(t, "fff"), f, h * q, !0, !0)));
+						l[m] = k.getTime();
+						l[y] = B.getTime()
+					}
+					h = {};
+					b.copyProperties(d, h);
+					c = {};
+					b.copyProperties(this.graph, c, !0);
+					for (p in n) k = n[p] + "Field", this.graph[k] && (c[k] = n[p] + "_" + a + "_" + g);
+					c.customData = h;
+					c.segmentData = d;
+					c.labelFunction = this.graph.labelFunction;
+					c.balloonFunction = this.graph.balloonFunction;
+					c.customBullet = this.graph.customBullet;
+					c.type = "column";
+					c.openField = m;
+					c.valueField = y;
+					c.clustered = !1;
+					d[w] && (e = d[w]);
+					c.columnWidth = d[this.columnWidthField];
+					void 0 === e && (e = this.colors[a]);
+					(d = this.brightnessStep) && (e = b.adjustLuminosity(e, g * d / 100));
+					void 0 === this.graph.lineColor && (c.lineColor = e);
+					void 0 === this.graph.fillColors && (c.fillColors = e);
+					this.graphs.push(c)
+				}
+			}
+		}
+	})
+})();

Resources/Public/JavaScript/lighttheme.min.js

+AmCharts.themes.light = {
+	themeName: "light",
+	AmChart: {color: "#000000", backgroundColor: "#FFFFFF"},
+	AmCoordinateChart: {colors: ["#67b7dc", "#fdd400", "#84b761", "#cc4748", "#cd82ad", "#2f4074", "#448e4d", "#b7b83f", "#b9783f", "#b93e3d", "#913167"]},
+	AmStockChart: {colors: ["#67b7dc", "#fdd400", "#84b761", "#cc4748", "#cd82ad", "#2f4074", "#448e4d", "#b7b83f", "#b9783f", "#b93e3d", "#913167"]},
+	AmSlicedChart: {
+		colors: ["#67b7dc", "#fdd400", "#84b761", "#cc4748", "#cd82ad", "#2f4074", "#448e4d", "#b7b83f", "#b9783f", "#b93e3d", "#913167"],
+		outlineAlpha: 1,
+		outlineThickness: 2,
+		labelTickColor: "#000000",
+		labelTickAlpha: 0.3
+	},
+	AmRectangularChart: {zoomOutButtonColor: '#000000', zoomOutButtonRollOverAlpha: 0.15, zoomOutButtonImage: "lens"},
+	AxisBase: {axisColor: "#000000", axisAlpha: 0.3, gridAlpha: 0.1, gridColor: "#000000"},
+	ChartScrollbar: {
+		backgroundColor: "#000000",
+		backgroundAlpha: 0.12,
+		graphFillAlpha: 0.5,
+		graphLineAlpha: 0,
+		selectedBackgroundColor: "#FFFFFF",
+		selectedBackgroundAlpha: 0.4,
+		gridAlpha: 0.15
+	},
+	ChartCursor: {cursorColor: "#000000", color: "#FFFFFF", cursorAlpha: 0.5},
+	AmLegend: {color: "#000000"},
+	AmGraph: {lineAlpha: 0.9},
+	GaugeArrow: {
+		color: "#000000",
+		alpha: 0.8,
+		nailAlpha: 0,
+		innerRadius: "40%",
+		nailRadius: 15,
+		startWidth: 15,
+		borderAlpha: 0.8,
+		nailBorderAlpha: 0
+	},
+	GaugeAxis: {
+		tickColor: "#000000",
+		tickAlpha: 1,
+		tickLength: 15,
+		minorTickLength: 8,
+		axisThickness: 3,
+		axisColor: '#000000',
+		axisAlpha: 1,
+		bandAlpha: 0.8
+	},
+	TrendLine: {lineColor: "#c03246", lineAlpha: 0.8},
+	AreasSettings: {
+		alpha: 0.8,
+		color: "#67b7dc",
+		colorSolid: "#003767",
+		unlistedAreasAlpha: 0.4,
+		unlistedAreasColor: "#000000",
+		outlineColor: "#FFFFFF",
+		outlineAlpha: 0.5,
+		outlineThickness: 0.5,
+		rollOverColor: "#3c5bdc",
+		rollOverOutlineColor: "#FFFFFF",
+		selectedOutlineColor: "#FFFFFF",
+		selectedColor: "#f15135",
+		unlistedAreasOutlineColor: "#FFFFFF",
+		unlistedAreasOutlineAlpha: 0.5
+	},
+	LinesSettings: {color: "#000000", alpha: 0.8},
+	ImagesSettings: {alpha: 0.8, labelColor: "#000000", color: "#000000", labelRollOverColor: "#3c5bdc"},
+	ZoomControl: {buttonFillAlpha: 0.7, buttonIconColor: "#a7a7a7"},
+	SmallMap: {
+		mapColor: "#000000",
+		rectangleColor: "#f15135",
+		backgroundColor: "#FFFFFF",
+		backgroundAlpha: 0.7,
+		borderThickness: 1,
+		borderAlpha: 0.8
+	},
+	PeriodSelector: {color: "#000000"},
+	PeriodButton: {
+		color: "#000000",
+		background: "transparent",
+		opacity: 0.7,
+		border: "1px solid rgba(0, 0, 0, .3)",
+		MozBorderRadius: "5px",
+		borderRadius: "5px",
+		margin: "1px",
+		outline: "none",
+		boxSizing: "border-box"
+	},
+	PeriodButtonSelected: {
+		color: "#000000",
+		backgroundColor: "#b9cdf5",
+		border: "1px solid rgba(0, 0, 0, .3)",
+		MozBorderRadius: "5px",
+		borderRadius: "5px",
+		margin: "1px",
+		outline: "none",
+		opacity: 1,
+		boxSizing: "border-box"
+	},
+	PeriodInputField: {color: "#000000", background: "transparent", border: "1px solid rgba(0, 0, 0, .3)", outline: "none"},
+	DataSetSelector: {color: "#000000", selectedBackgroundColor: "#b9cdf5", rollOverBackgroundColor: "#a8b0e4"},
+	DataSetCompareList: {
+		color: "#000000",
+		lineHeight: "100%",
+		boxSizing: "initial",
+		webkitBoxSizing: "initial",
+		border: "1px solid rgba(0, 0, 0, .3)"
+	},
+	DataSetSelect: {border: "1px solid rgba(0, 0, 0, .3)", outline: "none"}
+};