@osimatic/helpers-js 1.2.8 → 1.3.0

package/chartjs.js

@@ -0,0 +1,309 @@
+class Chartjs {
+	static init() {
+		if (typeof Chartjs.initialized == 'undefined' || Chartjs.initialized) {
+			return;
+		}
+
+		Chartjs.initialized = true;
+
+		const centerTextPlugin = {
+			id: 'centerText',
+			afterDraw(chart) {
+				if (typeof chart.config.options.centerText == 'undefined' || !chart.config.options.centerText.display) {
+					return;
+				}
+
+				const { ctx, chartArea: { width, height } } = chart;
+				ctx.save();
+				const total = chart.data.datasets[0].data.reduce((a,b) => a+b, 0);
+				const label = chart.config.options.centerText.label || '';
+				const fontSize = chart.config.options.centerText.fontSize || 16;
+				const textColor = chart.config.options.centerText.color || '#333';
+
+				ctx.font = `bold ${fontSize}px sans-serif`;
+				ctx.fillStyle = textColor;
+				ctx.textAlign = 'center';
+				ctx.textBaseline = 'middle';
+				ctx.fillText(`${total}`, width / 2, height / 2);
+				if (label) {
+					ctx.font = `12px sans-serif`;
+					ctx.fillText(label, width / 2, height / 2 + 20);
+				}
+				ctx.restore();
+			}
+		};
+
+		Chart.register(centerTextPlugin);
+	}
+
+	static createStackedChart(chartDiv, chartData, title=null, options={}) {
+		chartDiv.empty();
+		new Chart(chartDiv.get(0).getContext("2d"), $.extend(true, {}, {
+			type: "bar",
+			data: {
+				labels: chartData.labels,
+				datasets: chartData.datasets
+			},
+			options: {
+				responsive: true,
+				scales: {
+					x: {
+						stacked: true
+					},
+					y: {
+						stacked: true,
+						beginAtZero: true,
+						ticks: {
+							precision: 0
+						},
+					}
+				},
+				plugins: {
+					title: {
+						display: null !== title,
+						text: title || '',
+						font: { size: 14 },
+						color: "#333",
+						padding: { top: 10, bottom: 20 }
+					},
+					legend: {
+						position: "bottom",
+						labels: {
+							usePointStyle: true,
+							padding: 15
+						}
+					},
+					tooltip: {
+						callbacks: {
+							label: function(context) {
+								return `${context.dataset.label}: ${context.parsed.y}`;
+							}
+						}
+					}
+				}
+			}
+		}, options));
+	}
+
+	static createBarChart(chartDiv, chartData, title=null, options={}) {
+		chartDiv.empty();
+		new Chart(chartDiv.get(0).getContext("2d"), $.extend(true, {}, {
+			type: "bar",
+			data: {
+				labels: chartData.labels,
+				datasets: chartData.datasets
+			},
+			options: {
+				responsive: false,
+				maintainAspectRatio: false,
+				aspectRatio: 2,
+				scales: {
+					x: {
+						grid: {
+							display: false
+						},
+						/*ticks: {
+							font: { size: 12 }
+						}*/
+					},
+					y: {
+						beginAtZero: true,
+						ticks: {
+							precision: 0
+							//stepSize: 10, font: { size: 12 }
+						},
+						grid: {
+							color: "#eee"
+						}
+					}
+				},
+				plugins: {
+					title: {
+						display: null !== title,
+						text: title || '',
+						font: { size: 14 },
+						color: "#333",
+						padding: { top: 10, bottom: 20 }
+					},
+					legend: {
+						display: chartData.datasets.length > 1,
+						position: "bottom",
+					},
+					tooltip: {
+						callbacks: {
+							label: context => context.dataset.label + ' : ' + context.parsed.y
+							//label: (context) => `${context.formattedValue} pointages`
+						}
+					}
+				},
+				animation: {
+					duration: 1200,
+					easing: "easeOutQuart"
+				}
+			}
+		}, options));
+	}
+
+	static createLineChart(chartDiv, chartData, title=null, options={}) {
+		Chartjs.init();
+
+		chartDiv.empty();
+		new Chart(chartDiv.get(0).getContext("2d"), $.extend(true, {}, {
+			type: "line",
+			data: {
+				labels: chartData.labels,
+				datasets: chartData.datasets
+			},
+			options: {
+				responsive: false,
+				maintainAspectRatio: false,
+				aspectRatio: 2,
+				scales: {
+					y: {
+						beginAtZero: true,
+						ticks: {
+							precision: 0
+						},
+						grid: {
+							color: "#eee"
+						}
+					},
+					x: {
+						grid: {
+							display: false
+						}
+					}
+				},
+				plugins: {
+					title: {
+						display: null !== title,
+						text: title || '',
+						font: { size: 14 },
+						color: "#333",
+						padding: { top: 10, bottom: 20 }
+					},
+					legend: {
+						display: chartData.datasets.length > 1,
+						position: "bottom",
+					},
+					tooltip: {
+						callbacks: {
+							label: context => context.dataset.label + ' : ' + context.parsed.y
+						}
+					}
+				}
+			}
+		}, options));
+	}
+
+	static createDoughnutChart(chartDiv, chartData, title=null, options={}) {
+		Chartjs.init();
+
+		chartDiv.empty();
+		new Chart(chartDiv.get(0).getContext("2d"), $.extend(true, {}, {
+			type: "doughnut",
+			data: {
+				labels: chartData.labels,
+				datasets: [{
+					data: chartData.values,
+					backgroundColor: chartData.colors,
+					borderWidth: 0,
+					hoverOffset: 10
+				}]
+			},
+			options: {
+				cutout: "65%",
+				responsive: false,
+				maintainAspectRatio: false,
+				aspectRatio: 2,
+				plugins: {
+					title: {
+						display: null !== title,
+						text: title || ''
+					},
+					legend: {
+						position: "right",
+						labels: {
+							boxWidth: 12,
+							font: { size: 12 },
+							usePointStyle: true
+						}
+					},
+					tooltip: {
+						callbacks: {
+							label: function(context) {
+								const total = context.dataset.data.reduce((a,b)=>a+b,0);
+								const value = context.raw;
+								const percent = ((value / total) * 100).toFixed(1);
+								return `${context.label}: ${value} (${percent}%)`;
+							}
+						}
+					}
+				},
+				animation: {
+					animateRotate: true,
+					animateScale: true
+				},
+				centerText: {
+					display: false,
+					fontSize: 18,
+					color: "#000"
+				}
+			}
+		}, options));
+	}
+
+	static groupByPeriod(data, period, metrics) {
+		const grouped = {};
+
+		//data = Object.entries(dataObj).map(([date, values]) => ({ date, ...values }));
+
+		Object.entries(data).forEach(([date, values]) => {
+			//data.forEach(entry => {
+			const d = new Date(date);
+			let key;
+
+			if (period === 'week') {
+				const week = Math.ceil((d.getDate() - d.getDay() + 1) / 7);
+				key = `${d.getFullYear()}-S${week}`;
+			}
+			else if (period === 'month') {
+				key = `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}`;
+			}
+			else {
+				key = date;
+			}
+
+			if (!grouped[key]) {
+				grouped[key] = {};
+				metrics.forEach(m => grouped[key][m] = []);
+			}
+
+			metrics.forEach(m => {
+				if (values[m] !== undefined) grouped[key][m].push(values[m]);
+			});
+		});
+
+		return Object.entries(grouped).map(([label, vals]) => {
+			const aggregated = {};
+			metrics.forEach(m => {
+				aggregated[m] = vals[m].reduce((a, b) => a + b, 0) / vals[m].length;
+			});
+			return { label, ...aggregated };
+		});
+	}
+
+	static getPeriodLabels(data, period, locale = 'fr-FR', timeZone = 'Europe/Paris') {
+		return DatePeriod.getPeriodLabels(Object.keys(data), period, locale, timeZone);
+	}
+
+	static getAutoGranularity(data) {
+		const dates = Object.keys(data);
+		const days = (new Date(dates[dates.length - 1]) - new Date(dates[0])) / (1000 * 60 * 60 * 24);
+		if (days > 90) return 'month';
+		if (days > 30) return 'week';
+		return 'day_of_month';
+	}
+}
+
+module.exports = { Chartjs };

package/date_time.js

@@ -122,7 +122,7 @@ class DateTime {
 	static getTimeDisplayWithNbDays(jsDate, jsPreviousDate, locale="fr-FR", timeZone="Europe/Paris") {
 		let str = this.getTimeDisplay(jsDate, locale, timeZone);
 		if (jsPreviousDate !== 0 && jsPreviousDate != null) {
-			let nbDaysDiff = this.getNbDayBetweenTwo(jsPreviousDate, jsDate, false);
+			let nbDaysDiff = DatePeriod.getNbDayBetweenTwo(jsPreviousDate, jsDate, false);
 			if (nbDaysDiff > 0) {
 				str += ' (J+'+nbDaysDiff+')';
 			}
@@ -277,6 +277,27 @@ class DateTime {
 		return jsDateTime > today;
 	}
 
+	static addDays(date, days) {
+		date.setUTCDate(date.getUTCDate() + days);
+		return date;
+	}
+
+	static addMonths(date, months) {
+		let d = date.getDate();
+		date.setMonth(date.getMonth() + +months);
+		if (date.getDate() !== d) {
+			date.setDate(0);
+		}
+		return date;
+	}
+
+	/** @deprecated use DatePeriod.getNbDayBetweenTwo instead */
+	static getNbDayBetweenTwo(jsDate1, jsDate2, asPeriod=false, timeZone="Europe/Paris") {
+		return DatePeriod.getNbDayBetweenTwo(jsDate1, jsDate2, asPeriod, timeZone);
+	}
+}
+
+class DatePeriod {
 	static getNbDayBetweenTwo(jsDate1, jsDate2, asPeriod=false, timeZone="Europe/Paris") {
 		//jsDate1.set
 		if (jsDate1 == null || jsDate2 == null) {
@@ -299,18 +320,34 @@ class DateTime {
 		return parseInt(Math.round((timestamp2-timestamp1)/86400));
 	}
 
-	static addDays(date, days) {
-		date.setUTCDate(date.getUTCDate() + days);
-		return date;
-	}
+	static getPeriodLabels(data, period, locale = 'fr-FR', timeZone = 'Europe/Paris') {
+		if (!data || data.length === 0) {
+			return [];
+		}
 
-	static addMonths(date, months) {
-		let d = date.getDate();
-		date.setMonth(date.getMonth() + +months);
-		if (date.getDate() !== d) {
-			date.setDate(0);
+		if (period === 'month') {
+			data.map(yearAndMonth => {
+				const [year, month] = yearAndMonth.split('-').map(Number);
+				return DateTime.getMonthNameByMonth(month, locale).capitalize()+' '+year;
+			});
 		}
-		return date;
+		if (period === 'week') {
+			return data.map(yearAndWeek => {
+				const [year, weekStr] = yearAndWeek.split('-S');
+				const week = parseInt(weekStr, 10);
+				return 'S'+week+' '+year;
+			});
+		}
+		if (period === 'day_of_week') {
+			return data.map(weekDay => DateTime.getDayNameByDayOfWeek(weekDay, locale).capitalize());
+		}
+		if (period === 'day_of_month') {
+			return data.map(sqlDate => SqlDate.getDateDigitalDisplay(sqlDate, locale, timeZone));
+		}
+		if (period === 'hour') {
+			return data.map(hour => String(hour).padStart(2, '0')+'h');
+		}
+		return data;
 	}
 }
 
@@ -386,7 +423,7 @@ class TimestampUnix {
 	}
 
 	static getNbDayBetweenTwo(timestamp1, timestamp2, asPeriod=false, timeZone="Europe/Paris") {
-		return DateTime.getNbDayBetweenTwo(this.parse(timestamp1), this.parse(timestamp2), asPeriod, timeZone);
+		return DatePeriod.getNbDayBetweenTwo(this.parse(timestamp1), this.parse(timestamp2), asPeriod, timeZone);
 	}
 
 	static isDateInThePast(timestamp) {
@@ -452,7 +489,7 @@ class SqlDate {
 		return DateTime.isDateInTheFuture(SqlDateTime.parse(sqlDate + " 00:00:00"));
 	}
 	static getNbDayBetweenTwo(sqlDate1, sqlDate2, asPeriod=false) {
-		return DateTime.getNbDayBetweenTwo(SqlDateTime.parse(sqlDate1 + " 00:00:00"), SqlDateTime.parse(sqlDate2 + " 00:00:00"), asPeriod);
+		return DatePeriod.getNbDayBetweenTwo(SqlDateTime.parse(sqlDate1 + " 00:00:00"), SqlDateTime.parse(sqlDate2 + " 00:00:00"), asPeriod);
 	}
 }
 
@@ -585,9 +622,9 @@ class SqlDateTime {
 	}
 
 	static getNbDayBetweenTwo(sqlDateTime1, sqlDateTime2, asPeriod=false) {
-		return DateTime.getNbDayBetweenTwo(this.parse(sqlDateTime1), this.parse(sqlDateTime2), asPeriod);
+		return DatePeriod.getNbDayBetweenTwo(this.parse(sqlDateTime1), this.parse(sqlDateTime2), asPeriod);
 	}
 
 }
 
-module.exports = { DateTime, TimestampUnix, SqlDate, SqlTime, SqlDateTime };
+module.exports = { DateTime, DatePeriod, TimestampUnix, SqlDate, SqlTime, SqlDateTime };

package/duration.js

@@ -69,9 +69,8 @@ class Duration {
 		
 		// Minutes
 		let strMinute = '';
-		let nbMinutes = 0;
 		if (withMinutes) {
-			nbMinutes = this.getNbMinutesRemainingOfDurationInSeconds(durationInSeconds);
+			let nbMinutes = this.getNbMinutesRemainingOfDurationInSeconds(durationInSeconds);
 			strMinute += ' ';
 			//strMinute += sprintf('%02d', nbMinutes);
 			strMinute += nbMinutes.toString().padStart(2, '0');

package/index.js

@@ -12,7 +12,7 @@ const { HTTPRequest, Cookie, UrlAndQueryString } = require('./network');
 const { IBAN, BankCard } = require('./bank');
 const { AudioMedia, VideoMedia, UserMedia } = require('./media');
 const { PersonName, Email, TelephoneNumber } = require('./contact_details');
-const { DateTime, TimestampUnix, SqlDate, SqlTime, SqlDateTime } = require('./date_time');
+const { DateTime, DatePeriod, TimestampUnix, SqlDate, SqlTime, SqlDateTime } = require('./date_time');
 const { Duration } = require('./duration');
 const { File, CSV, Img } = require('./file');
 const { FormHelper, EditValue } = require('./form_helper');
@@ -41,6 +41,7 @@ const { WebRTC } = require('./web_rtc');
 const { EventBus } = require('./event_bus');
 
 // exports surcouche lib externe
+const { Chartjs } = require('./chartjs');
 const { GoogleCharts } = require('./google_charts');
 const { GoogleRecaptcha } = require('./google_recaptcha');
 const { GoogleMap } = require('./google_maps');
@@ -49,8 +50,8 @@ const { WebSocket } = require('./web_socket');
 
 module.exports = {
 	Array, Object, Number, String,
-	HTTPClient, HTTPRequest, Cookie, UrlAndQueryString, IBAN, BankCard, AudioMedia, VideoMedia, UserMedia, PersonName, Email, TelephoneNumber, DateTime, TimestampUnix, SqlDate, SqlTime, SqlDateTime, Duration, File, CSV, Img, FormHelper, Country, PostalAddress, GeographicCoordinates, HexColor, RgbColor, SocialNetwork, NumberFormatter
+	HTTPClient, HTTPRequest, Cookie, UrlAndQueryString, IBAN, BankCard, AudioMedia, VideoMedia, UserMedia, PersonName, Email, TelephoneNumber, DateTime, DatePeriod, TimestampUnix, SqlDate, SqlTime, SqlDateTime, Duration, File, CSV, Img, FormHelper, Country, PostalAddress, GeographicCoordinates, HexColor, RgbColor, SocialNetwork, NumberFormatter,
 	Browser, DataTable, Pagination, Navigation, DetailsSubArray, SelectAll, MultipleActionInTable, MultipleActionInDivList, EditValue, FormDate, InputPeriod, ShoppingCart, FlashMessage, CountDown, ImportFromCsv, JwtToken, JwtSession, ApiTokenSession, ListBox, WebRTC, WebSocket, EventBus,
 	sleep, refresh, chr, ord, trim, empty,
-	GoogleCharts, GoogleRecaptcha, GoogleMap, OpenStreetMap
+	Chartjs, GoogleCharts, GoogleRecaptcha, GoogleMap, OpenStreetMap
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@osimatic/helpers-js",
-  "version": "1.2.8",
+  "version": "1.3.0",
   "main": "main.js",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1"