@osimatic/helpers-js 1.5.3 → 1.5.4

package/google_charts.js

@@ -3,90 +3,100 @@ class GoogleCharts {
 		// google.load("visualization", "1", {packages:["corechart"]});
 		google.charts.load('current', {'packages':['bar','line','corechart']});
 		// google.charts.load('current', {packages:['corechart']});
-		
+
 		if (onLoadCallback !== 'undefined') {
 			google.charts.setOnLoadCallback(onLoadCallback);
-		} 
+		}
 	}
 
 	static drawCharts(chartsList, onComplete) {
 		// on supprime du tableau la liste des graphiques dont l'id div n'a pas été trouvé (le graphique ne pourra pas être généré)
-		chartsList = chartsList.filter(chartData => typeof chartData.div_id != 'undefined' && $('#'+chartData.div_id).length);
+		chartsList = chartsList.filter(chartData => typeof chartData.div_id != 'undefined' && document.getElementById(chartData.div_id) !== null);
 
 		let nbChartsCompleted = 0;
 		chartsList.forEach(chartData => {
 			//console.log(chartData);
 			GoogleCharts.draw(
-				$('#'+chartData.div_id),
-				chartData.chart_type,
-				chartData.title,
-				chartData.abscissa_label,
-				chartData.abscissa_data,
-				chartData.ordinate_label,
-				chartData.ordinate_data,
-				chartData.colors,
-				chartData.ordinate_format,
-				chartData.height,
-				chartData.width,
-				chart => {
-					nbChartsCompleted++;
-					// si tous les graphiques ont été chargés, on appelle le callback onComplete transmis en paramètre
-					if (chartsList.length === nbChartsCompleted && typeof onComplete == 'function') {
-						onComplete();
-					}
+				document.getElementById(chartData.div_id),
+				{
+					chart_type: chartData.chart_type,
+					title: chartData.title,
+					abscissa_label: chartData.abscissa_label,
+					abscissa_data: chartData.abscissa_data,
+					ordinate_label: chartData.ordinate_label,
+					ordinate_data: chartData.ordinate_data,
+					colors: chartData.colors,
+					ordinate_format: chartData.ordinate_format,
+					height: chartData.height,
+					width: chartData.width,
+					onComplete: chart => {
+						nbChartsCompleted++;
+						// si tous les graphiques ont été chargés, on appelle le callback onComplete transmis en paramètre
+						if (chartsList.length === nbChartsCompleted && typeof onComplete == 'function') {
+							onComplete();
+						}
+					},
 				},
 			);
 		});
 	}
 
-	static draw(div, typeGraph, titre, libelleAbs, tabDataAbsParam, listeLibelleOrd, listeTabDataOrd, tabColor, formatData, height, width, onComplete) {
-		if (typeof div == 'undefined' || !div.length) {
+	static draw(div, options) {
+		const {
+			chart_type: chartType,
+			title: title,
+			abscissa_label: abscissaLabel,
+			abscissa_data: abscissaData,
+			ordinate_label: ordinateLabel,
+			ordinate_data: ordinateData,
+			colors: colors = [],
+			ordinate_format: formatData = null,
+			height: height = null,
+			width: width = null,
+			onComplete = null,
+		} = options;
+
+		if (typeof div == 'undefined' || !div) {
 			console.error('div not found');
 			return;
 		}
 
-		height = height || null;
-		width = width || null;
-
-		let htmlDomDiv = div[0];
-
-		let afficherLibelleOrd = false;
-
 		let isStacked = false;
-		if (typeGraph === 'stacked_bar_chart') {
-			typeGraph = 'bar_chart';
+		let graphType = chartType;
+		if (graphType === 'stacked_bar_chart') {
+			graphType = 'bar_chart';
 			isStacked = true;
 		}
-		if (typeGraph === 'stacked_column_chart') {
-			typeGraph = 'column_chart';
+		if (graphType === 'stacked_column_chart') {
+			graphType = 'column_chart';
 			isStacked = true;
 		}
-		if (typeGraph === 'stacked_combo_chart') {
-			typeGraph = 'combo_chart';
+		if (graphType === 'stacked_combo_chart') {
+			graphType = 'combo_chart';
 			isStacked = true;
 		}
 
 		let isDualChart = false;
-		if (typeGraph === 'dual_column_chart') {
-			typeGraph = 'column_chart';
+		if (graphType === 'dual_column_chart') {
+			graphType = 'column_chart';
 			isDualChart = true;
 		}
-		if (typeGraph === 'dual_bar_chart') {
-			typeGraph = 'bar_chart';
+		if (graphType === 'dual_bar_chart') {
+			graphType = 'bar_chart';
 			isDualChart = true;
 		}
 
 		let data = null;
 		let nbCells = 0;
-		if (typeGraph === 'pie_chart') {
+		if (graphType === 'pie_chart') {
 			//data = google.visualization.arrayToDataTable(tabDataAbsParam);
 
 			data = new google.visualization.DataTable();
-			data.addColumn('string', libelleAbs);
+			data.addColumn('string', abscissaLabel);
 			data.addColumn('number', '');
 
 			let numRow = 0;
-			$.each(tabDataAbsParam, function(idx, value) {
+			Object.entries(abscissaData).forEach(([idx, value]) => {
 				data.addRows(1);
 				data.setCell(numRow, 0, idx);
 				data.setCell(numRow, 1, value);
@@ -96,15 +106,15 @@ class GoogleCharts {
 		else {
 			// Déclaration du tableau de données
 			data = new google.visualization.DataTable();
-			data.addColumn('string', libelleAbs);
-			$.each(listeLibelleOrd, function(idx, libelleOrd) {
+			data.addColumn('string', abscissaLabel);
+			ordinateLabel.forEach((libelleOrd) => {
 				data.addColumn('number', libelleOrd);
 			});
 
 			// Remplissage des données
 			nbCells = 0;
 			let numRow = 0;
-			$.each(tabDataAbsParam, function(idx, dataAbs) {
+			abscissaData.forEach((dataAbs, idx) => {
 				// dataOrd = tabDataOrd[idx];
 				// data.addRow([dataAbs, dataOrd]);
 				data.addRows(1);
@@ -112,7 +122,7 @@ class GoogleCharts {
 				data.setCell(numRow, 0, dataAbs);
 
 				let numCell = 1;
-				$.each(listeTabDataOrd, function(idx2, tabDataOrd) {
+				ordinateData.forEach((tabDataOrd) => {
 					data.setCell(numRow, numCell, tabDataOrd[idx]);
 					//data.setCell(numRow, numCell, Math.round(tabDataOrd[idx], 2));
 					numCell++;
@@ -125,11 +135,11 @@ class GoogleCharts {
 		}
 
 		// console.log(data);
-		// console.log('drawGraph : '+div+' ; type : '+typeGraph);
+		// console.log('drawGraph : '+div+' ; type : '+graphType);
 
 		// Options générales
-		let options = {
-			colors: tabColor,
+		let chartOptions = {
+			colors: colors,
 			fontName: 'Trebuchet MS',
 			fontSize: 12,
 			hAxis: {maxAlternation: 1},
@@ -138,199 +148,199 @@ class GoogleCharts {
 		};
 
 		if (formatData != null) {
-			options.vAxis.format = formatData;
+			chartOptions.vAxis.format = formatData;
 		}
 
 		// Options sur le titre du graphique
-		options.title = titre;
-		if (typeGraph === 'pie_chart') {
-			// options.titlePosition = 'none';
+		chartOptions.title = title;
+		if (graphType === 'pie_chart') {
+			// chartOptions.titlePosition = 'none';
 		}
 		else {
-			options.titlePosition = 'none';
+			chartOptions.titlePosition = 'none';
 		}
 
 		// Options sur la taille du graphique
-		if (typeGraph === 'bar_chart') {
-			options.chartArea = {left:120, top:30};
-			//options.chartArea = {left:"auto", top:"auto"};
-			//options.chartArea = {};
+		if (graphType === 'bar_chart') {
+			chartOptions.chartArea = {left:120, top:30};
+			//chartOptions.chartArea = {left:"auto", top:"auto"};
+			//chartOptions.chartArea = {};
 			if (height != null) {
-				options.chartArea.height = (height - 60);
-				//options.chartArea.height = '100%';
+				chartOptions.chartArea.height = (height - 60);
+				//chartOptions.chartArea.height = '100%';
 			}
-			options.chartArea.width = "85%";
-			//options.chartArea.width = "100%";
+			chartOptions.chartArea.width = "85%";
+			//chartOptions.chartArea.width = "100%";
 		}
 		else {
-			options.chartArea = {left:"auto", top:"auto"};
+			chartOptions.chartArea = {left:"auto", top:"auto"};
 			if (height != null) {
-				options.chartArea.height = height+"%";
+				chartOptions.chartArea.height = height+"%";
 			}
 			else {
-				options.chartArea.height = "80%";
+				chartOptions.chartArea.height = "80%";
 			}
-			options.chartArea.width = "85%";
+			chartOptions.chartArea.width = "85%";
 		}
-		// options.chartArea = {};
-		// options.chartArea.height = "100%";
-		// options.chartArea.width = "100%";
+		// chartOptions.chartArea = {};
+		// chartOptions.chartArea.height = "100%";
+		// chartOptions.chartArea.width = "100%";
 
-		//options.width = width;
-		//options.width = "100%";
+		//chartOptions.width = width;
+		//chartOptions.width = "100%";
 		if (typeof height != 'undefined' && height != null) {
-			options.height = height;
+			chartOptions.height = height;
 		}
 		//console.log(div);
 		//console.log(div.width());
-		//options.width = div.width();
+		//chartOptions.width = div.width();
 
 		// Options sur la légende
-		options.legend = {};
-		if (typeGraph === 'pie_chart') {
-			options.legend.position = 'right';
+		chartOptions.legend = {};
+		if (graphType === 'pie_chart') {
+			chartOptions.legend.position = 'right';
 		}
-		else if (typeGraph === 'bar_chart') {
-			options.legend.position = 'bottom';
+		else if (graphType === 'bar_chart') {
+			chartOptions.legend.position = 'bottom';
 		}
 		else {
-			options.legend.position = 'top';
+			chartOptions.legend.position = 'top';
 		}
 
 		// Options sur l'affichage des labels en absisse / ordonnée
-		if (typeGraph === 'bar_chart') {
-			// options.hAxis.title = libelleOrd;
-			options.vAxis.title = libelleAbs;
+		if (graphType === 'bar_chart') {
+			// chartOptions.hAxis.title = libelleOrd;
+			chartOptions.vAxis.title = abscissaLabel;
 		}
 		else {
-			options.hAxis.title = libelleAbs;
-			// options.vAxis.title = libelleOrd;
+			chartOptions.hAxis.title = abscissaLabel;
+			// chartOptions.vAxis.title = libelleOrd;
 		}
 
 		// Options sur les graphiques "dual bar chart / dual column chart"
 		if (isDualChart) {
-			options.series = {};
-			options.axes = {};
-			if (typeGraph === 'column_chart') {
-				options.axes.y = {};
-				options.vAxes = {};
+			chartOptions.series = {};
+			chartOptions.axes = {};
+			if (graphType === 'column_chart') {
+				chartOptions.axes.y = {};
+				chartOptions.vAxes = {};
 			}
 			else {
-				options.axes.x = {};
-				options.hAxes = {};
+				chartOptions.axes.x = {};
+				chartOptions.hAxes = {};
 			}
-			$.each(listeLibelleOrd, function(idx, libelleOrd) {
+			ordinateLabel.forEach((libelleOrd, idx) => {
 				// console.log(idx);
 				if (idx <= 1) {
 					// key = 'series_'+idx;
 					let key = idx;
-					// options.series[idx] = {axis: key, targetAxisIndex: key};
-					options.series[idx] = {axis: key, targetAxisIndex: idx};
-					if (typeGraph === 'column_chart') {
-						options.axes.y[key] = {label: libelleOrd};
+					// chartOptions.series[idx] = {axis: key, targetAxisIndex: key};
+					chartOptions.series[idx] = {axis: key, targetAxisIndex: idx};
+					if (graphType === 'column_chart') {
+						chartOptions.axes.y[key] = {label: libelleOrd};
 						if (idx === 1) {
-							options.axes.y[key].side = 'right';
+							chartOptions.axes.y[key].side = 'right';
 						}
 						if (formatData != null) {
-							options.vAxes[key] = {format: formatData};
+							chartOptions.vAxes[key] = {format: formatData};
 						}
 					}
 					else {
-						options.axes.x[key] = {label: libelleOrd};
+						chartOptions.axes.x[key] = {label: libelleOrd};
 						if (idx === 1) {
-							options.axes.x[key].side = 'top';
+							chartOptions.axes.x[key].side = 'top';
 						}
 						if (formatData != null) {
-							options.hAxes[key] = {format: formatData};
+							chartOptions.hAxes[key] = {format: formatData};
 						}
 					}
 				}
 			});
-			// console.log(options.series);
-			// console.log(options.vAxes);
+			// console.log(chartOptions.series);
+			// console.log(chartOptions.vAxes);
 		}
 
 		// Options sur les graphiques "combo chart"
-		if (typeGraph === 'combo_chart') {
-			options.seriesType = "bars";
-			options.series = {};
-			options.series[nbCells] = {type: "line"};
+		if (graphType === 'combo_chart') {
+			chartOptions.seriesType = "bars";
+			chartOptions.series = {};
+			chartOptions.series[nbCells] = {type: "line"};
 		}
 
 		// Options sur le style des lignes pour les "line chart"
-		if (typeGraph === 'line_chart') {
-			options.series = [{lineWidth: 3}, {lineWidth: 1.5}];
-			options.curveType = 'function';
+		if (graphType === 'line_chart') {
+			chartOptions.series = [{lineWidth: 3}, {lineWidth: 1.5}];
+			chartOptions.curveType = 'function';
 		}
 
 		// Options sur le style pour les "pie chart"
-		if (typeGraph === 'pie_chart') {
-			options.is3D = false;
-			options.pieResidueSliceLabel = 'Autre';
+		if (graphType === 'pie_chart') {
+			chartOptions.is3D = false;
+			chartOptions.pieResidueSliceLabel = 'Autre';
 		}
 
-		if (typeGraph === 'bar_chart') {
-			options.bars = 'horizontal';
+		if (graphType === 'bar_chart') {
+			chartOptions.bars = 'horizontal';
 		}
 
 		if (isStacked) {
-			options.isStacked = true;
+			chartOptions.isStacked = true;
 		}
 
-		// console.log(options);
+		// console.log(chartOptions);
 
 		// Création du graphique
 		let chart = null;
-		if (typeGraph === 'column_chart') {
-			// chart = new google.visualization.ColumnChart(htmlDomDiv);
-			chart = new google.charts.Bar(htmlDomDiv);
+		if (graphType === 'column_chart') {
+			// chart = new google.visualization.ColumnChart(div);
+			chart = new google.charts.Bar(div);
 		}
-		else if (typeGraph === 'bar_chart') {
-			// chart = new google.visualization.BarChart(htmlDomDiv);
-			chart = new google.charts.Bar(htmlDomDiv);
+		else if (graphType === 'bar_chart') {
+			// chart = new google.visualization.BarChart(div);
+			chart = new google.charts.Bar(div);
 		}
-		else if (typeGraph === 'line_chart') {
-			// chart = new google.visualization.LineChart(htmlDomDiv);
-			chart = new google.charts.Line(htmlDomDiv);
+		else if (graphType === 'line_chart') {
+			// chart = new google.visualization.LineChart(div);
+			chart = new google.charts.Line(div);
 		}
-		else if (typeGraph === 'combo_chart') {
-			chart = new google.visualization.ComboChart(htmlDomDiv);
+		else if (graphType === 'combo_chart') {
+			chart = new google.visualization.ComboChart(div);
 		}
-		else if (typeGraph === 'pie_chart') {
-			chart = new google.visualization.PieChart(htmlDomDiv);
+		else if (graphType === 'pie_chart') {
+			chart = new google.visualization.PieChart(div);
 		}
 
-		div.removeClass('loading');
+		div.classList.remove('loading');
 
 		if (chart === null) {
 			console.error('error during creating chart');
-			div.addClass('graphique_error');
-			htmlDomDiv.innerHTML = 'Une erreur s\'est produite lors du chargement du graphique.';
+			div.classList.add('graphique_error');
+			div.innerHTML = 'Une erreur s\'est produite lors du chargement du graphique.';
 			return;
 		}
 
-		//div.addClass('graphique');
-		div.addClass('chart');
-		htmlDomDiv.innerHTML = '';
+		//div.classList.add('graphique');
+		div.classList.add('chart');
+		div.innerHTML = '';
 
-		// htmlDomDiv.style.display = 'block';
+		// div.style.display = 'block';
 		let tabPaneDiv = div;
-		if (!div.hasClass('tab-pane')) {
+		if (!div.classList.contains('tab-pane')) {
 			tabPaneDiv = div.closest('.tab-pane');
 		}
 
-		let hasClassActive = tabPaneDiv.hasClass('active');
+		let hasClassActive = tabPaneDiv?.classList.contains('active') ?? false;
 		if (!hasClassActive) {
-			tabPaneDiv.addClass('active');
+			tabPaneDiv?.classList.add('active');
 		}
 
 		google.visualization.events.addListener(chart, 'ready', function () {
 			//console.log('ready');
 			//console.log(chart);
-			// htmlDomDiv.style.display = 'none';
+			// div.style.display = 'none';
 			// div.hide();
 			if (!hasClassActive) {
-				tabPaneDiv.removeClass('active');
+				tabPaneDiv?.classList.remove('active');
 			}
 
 			if (typeof onComplete == 'function') {
@@ -339,9 +349,9 @@ class GoogleCharts {
 		});
 
 		// console.log($("ul li.ui-state-active").index()
-		//console.log(options);
+		//console.log(chartOptions);
 
-		chart.draw(data, options);
+		chart.draw(data, chartOptions);
 	}
 
 }

package/google_maps.js

@@ -5,7 +5,7 @@ class GoogleMap {
 		this.locations = [];
 		this.mapId = mapId;
 
-		if (!$('#'+mapId).length) {
+		if (!document.getElementById(mapId)) {
 			return;
 		}