nuxeo-development-framework 5.6.4 → 5.6.5

package/src/lib/components/reports/charts/plugins/data-labels.ts

@@ -1,277 +0,0 @@
-import { ArcElement, Chart, Plugin } from 'chart.js';
-import { ChartConfiguration, ChartType } from 'chart.js/dist/types';
-import BarElement from 'chart.js/dist/elements/element.bar';
-import { getColor, getTextColor } from '../utility';
-
-// Configuration constants
-const LABEL_CONFIG = {
-	minFontSize: 10,
-	maxFontSize: 16,
-	defaultFontSize: 12,
-	textPadding: 8,
-	minAngleForPieLabel: 0.3, // ~17 degrees
-	arcRadiusMultiplier: {
-		pie: 0.7,
-		doughnut: 0.8
-	},
-	fontSizeCalculation: {
-		percentageDivisor: 3,
-		maxPercentageForFontSize: 20
-	}
-} as const;
-
-// Types
-interface TextMetrics {
-	width: number;
-	height: number;
-}
-
-interface LabelData {
-	text: string;
-	percentage: number;
-	backgroundColor: string | undefined;
-	isVisible: boolean;
-}
-
-interface LabelPosition {
-	x: number;
-	y: number;
-	color: string;
-}
-
-// Main plugin
-export const chartDataLabels: Plugin<ChartType> = {
-	id: 'chartDataLabels',
-	afterDatasetsDraw(chart, args, plugins) {
-		const { ctx } = chart;
-		ctx.save();
-
-		const chartType = (chart.config as ChartConfiguration)?.type;
-		const renderer = getChartRenderer(chartType);
-
-		if (renderer) {
-			renderer(chart);
-		}
-
-		ctx.restore();
-	}
-};
-
-// Chart type router
-function getChartRenderer(chartType: string | undefined) {
-	const renderers = {
-		bar: barChartLabels,
-		pie: pieChartLabels,
-		doughnut: doughnutChartLabels
-	};
-
-	return renderers[chartType as keyof typeof renderers];
-}
-
-// Core utility functions
-function calculatePercentage(value: number, total: number): number {
-	return total > 0 ? (value / total) * 100 : 0;
-}
-
-function calculateFontSize(percentage: number): number {
-	const { percentageDivisor, maxPercentageForFontSize } = LABEL_CONFIG.fontSizeCalculation;
-	const calculatedSize = Math.min(percentage / percentageDivisor, maxPercentageForFontSize);
-	return Math.max(LABEL_CONFIG.minFontSize, Math.min(calculatedSize, LABEL_CONFIG.maxFontSize));
-}
-
-function getTextMetrics(ctx: CanvasRenderingContext2D, text: string, fontSize: number): TextMetrics {
-	ctx.font = `normal ${fontSize}px sans-serif`;
-	const metrics = ctx.measureText(text);
-	const height = metrics.actualBoundingBoxAscent + metrics.actualBoundingBoxDescent || LABEL_CONFIG.defaultFontSize;
-
-	return {
-		width: metrics.width,
-		height
-	};
-}
-
-function prepareCanvasForText(ctx: CanvasRenderingContext2D, fontSize: number, color: string): void {
-	ctx.font = `bold ${fontSize}px sans-serif`;
-	ctx.textAlign = 'center';
-	ctx.textBaseline = 'middle';
-	ctx.fillStyle = color;
-}
-
-function extractLabelData(
-	dataset: any,
-	index: number,
-	totalSum: number,
-	chart: Chart<ChartType, unknown, unknown>
-): LabelData | null {
-	const value = dataset.data[index] as number;
-	const percentage = calculatePercentage(value, totalSum);
-	const isVisible = chart.getDataVisibility(index);
-
-	if (!percentage || !isVisible) {
-		return null;
-	}
-
-	return {
-		text: `${percentage.toFixed(1)}%`,
-		percentage,
-		backgroundColor: Array.isArray(dataset.backgroundColor) ? dataset.backgroundColor[index] : dataset.backgroundColor,
-		isVisible
-	};
-}
-
-// Bar chart implementation
-function barChartLabels(chart: Chart): void {
-	const { ctx } = chart;
-	const isHorizontalChart = chart.options?.indexAxis === 'y';
-	const { isHorizontalReversed } = getBarChartOrientation(chart);
-
-	chart.data.datasets.forEach((dataset, datasetIndex) => {
-		const meta = chart.getDatasetMeta(datasetIndex);
-		const totalSum = (dataset.data as number[]).reduce((sum, value) => sum + value, 0);
-
-		meta.data.forEach((dataPoint: BarElement, index) => {
-			if (!dataPoint) return;
-
-			const labelData = extractLabelData(dataset, index, totalSum, chart);
-			if (!labelData) return;
-
-			const fontSize = calculateFontSize(labelData.percentage);
-			const textMetrics = getTextMetrics(ctx, labelData.text, fontSize);
-
-			const position = calculateBarLabelPosition(
-				dataPoint,
-				textMetrics,
-				isHorizontalChart,
-				isHorizontalReversed,
-				labelData.backgroundColor
-			);
-
-			if (position) {
-				prepareCanvasForText(ctx, fontSize, position.color);
-				ctx.fillText(labelData.text, position.x, position.y);
-			}
-		});
-	});
-}
-
-function calculateBarLabelPosition(
-	dataPoint: BarElement,
-	textMetrics: TextMetrics,
-	isHorizontal: boolean,
-	isReversed: boolean,
-	backgroundColor: string | undefined
-): LabelPosition | null {
-	const { textPadding } = LABEL_CONFIG;
-
-	if (isHorizontal) {
-		const fitsInside = textMetrics.width + textPadding * 2 <= dataPoint.width;
-
-		if (fitsInside) {
-			return {
-				x: dataPoint.x + (isReversed ? textMetrics.width / 2 + textPadding : -(textMetrics.width / 2 + textPadding)),
-				y: dataPoint.y,
-				color: getTextColor(backgroundColor)
-			};
-		} else {
-			return {
-				x: dataPoint.x + (isReversed ? -textMetrics.width / 2 - textPadding : textMetrics.width / 2 + textPadding),
-				y: dataPoint.y,
-				color: getColor('--chart-value-default-color', '#000')
-			};
-		}
-	} else {
-		const fitsInside = textMetrics.height + textPadding * 2 <= dataPoint.height;
-
-		if (fitsInside) {
-			return {
-				x: dataPoint.x,
-				y: dataPoint.y + textPadding / 2 + textMetrics.height / 2,
-				color: getTextColor(backgroundColor)
-			};
-		} else {
-			return {
-				x: dataPoint.x,
-				y: dataPoint.y - textMetrics.height / 2 - textPadding,
-				color: getColor('--chart-value-default-color', '#000')
-			};
-		}
-	}
-}
-
-// Pie chart implementation
-function pieChartLabels(chart: Chart<ChartType, unknown, unknown>): void {
-	renderArcLabels(chart, 'pie');
-}
-
-// Doughnut chart implementation
-function doughnutChartLabels(chart: Chart<ChartType, unknown, unknown>): void {
-	renderArcLabels(chart, 'doughnut');
-}
-
-function renderArcLabels(chart: Chart<ChartType, unknown, unknown>, chartType: 'pie' | 'doughnut'): void {
-	const { ctx } = chart;
-
-	chart.data.datasets.forEach((dataset, datasetIndex) => {
-		const meta = chart.getDatasetMeta(datasetIndex);
-		const totalSum = (dataset.data as number[]).reduce((sum, value) => sum + value, 0);
-
-		meta.data.forEach((arc: ArcElement, index) => {
-			if (!arc) return;
-
-			const labelData = extractLabelData(dataset, index, totalSum, chart);
-			if (!labelData) return;
-
-			if (shouldShowArcLabel(arc, labelData.text, chartType)) {
-				const position = calculateArcLabelPosition(arc, chartType);
-				const fontSize = calculateFontSize(labelData.percentage);
-				const textColor = getTextColor(labelData.backgroundColor || '#000000');
-
-				prepareCanvasForText(ctx, fontSize, textColor);
-				ctx.fillText(labelData.text, position.x, position.y);
-			}
-		});
-	});
-}
-
-function shouldShowArcLabel(arc: ArcElement, text: string, chartType: 'pie' | 'doughnut'): boolean {
-	const arcAngle = Math.abs(arc.endAngle - arc.startAngle);
-
-	// Don't show labels for very small slices
-	if (arcAngle < LABEL_CONFIG.minAngleForPieLabel) {
-		return false;
-	}
-
-	// For doughnut charts, also check if there's enough radial space
-	if (chartType === 'doughnut') {
-		const radialSpace = arc.outerRadius - arc.innerRadius;
-		return radialSpace >= LABEL_CONFIG.defaultFontSize * 1.5;
-	}
-
-	return true;
-}
-
-function calculateArcLabelPosition(arc: ArcElement, chartType: 'pie' | 'doughnut'): { x: number; y: number } {
-	const midAngle = (arc.startAngle + arc.endAngle) / 2;
-	const radiusMultiplier = LABEL_CONFIG.arcRadiusMultiplier[chartType];
-
-	let radius: number;
-	if (chartType === 'doughnut') {
-		radius = (arc.outerRadius + arc.innerRadius) / 2;
-	} else {
-		radius = arc.outerRadius * radiusMultiplier;
-	}
-
-	return {
-		x: arc.x + Math.cos(midAngle) * radius,
-		y: arc.y + Math.sin(midAngle) * radius
-	};
-}
-
-// Utility functions
-function getBarChartOrientation(chart: Chart<ChartType, unknown, unknown>) {
-	const scales = chart.options.scales;
-	return {
-		isVerticalReversed: scales?.y?.reverse === true,
-		isHorizontalReversed: scales?.x?.reverse === true
-	};
-}

package/src/lib/components/reports/charts/plugins/doughnut-center-text.ts

@@ -1,32 +0,0 @@
-import { Plugin } from 'chart.js';
-import { TextCenterOptions } from '../models';
-
-export const centerText: Plugin<'doughnut' | 'pie'> = {
-  id: 'centerText',
-  beforeDatasetDraw: (chart, args, options: TextCenterOptions) => {
-    const { ctx, data, config } = chart;
-
-    if (!['doughnut', 'pie'].includes(config['type'])) {
-      return;
-    }
-
-    const datasetMeta = chart.getDatasetMeta(0);
-    if (!data || !datasetMeta.data.length) {
-      return;
-    }
-    ctx.save();
-
-    const xCoor = datasetMeta.data[0].x;
-    const yCoor = datasetMeta.data[0].y;
-
-    const totalData = data.datasets[0].data.reduce((sum, value) => sum + value, 0);
-
-    ctx.font = options?.font || 'bold 1rem sans-serif';
-    ctx.fillStyle = options?.color || 'black';
-    ctx.textBaseline = 'middle';
-    ctx.textAlign = 'center';
-    ctx.fillText(options?.text ?? `${totalData}`, xCoor, yCoor);
-    ctx.restore();
-
-  },
-};

package/src/lib/components/reports/charts/plugins/doughnut-empty-state.ts

@@ -1,45 +0,0 @@
-import { Plugin } from 'chart.js';
-import { EmptyDoughnutOptions } from '../models';
-
-export const doughnutEmptyState: Plugin<'doughnut' | 'pie'> = {
-	id: 'emptyDoughnut',
-	afterDraw(chart, args, options: EmptyDoughnutOptions) {
-		const { datasets } = chart.data;
-
-		if (!['doughnut', 'pie'].includes(chart.config['type'])) {
-			return;
-		}
-
-		const { color, lineWidth, radiusDecrease, backgroundColor, text, fontColor, showMessage, font } = options;
-
-		const hasData = datasets.some((set) => !![...set.data].filter(Boolean).length);
-
-		if (!hasData) {
-			const {
-				chartArea: { left, top, right, bottom },
-				ctx
-			} = chart;
-			const centerX = (left + right) / 2;
-			const centerY = (top + bottom) / 2;
-			const r = Math.min(right - left, bottom - top) / 2;
-
-			ctx.beginPath();
-			ctx.lineWidth = lineWidth || 1;
-			ctx.strokeStyle = color || 'rgba(0, 0, 0, 0.1)';
-			ctx.arc(centerX, centerY, r - (radiusDecrease || 0), 0, 2 * Math.PI);
-			ctx.fillStyle = backgroundColor || 'rgba(0, 0, 0, 0.03)';
-			ctx.fill();
-			ctx.stroke();
-
-			if (showMessage) {
-				// Draw the empty message
-				ctx.fillStyle = fontColor || '#000';
-				ctx.font = font || 'bold 1rem sans-serif';
-				ctx.textAlign = 'center';
-				ctx.textBaseline = 'middle';
-				ctx.fillText(text || 'No Data', centerX, centerY);
-			}
-			ctx.restore();
-		}
-	}
-};

package/src/lib/components/reports/charts/plugins/legend-margin.ts

@@ -1,18 +0,0 @@
-import { ChartType, Plugin } from 'chart.js';
-import { LegendMargin } from '../models';
-
-export const legendMargin: Plugin<ChartType> = {
-  id: 'legendMargin',
-  afterInit(chart, args, options: LegendMargin) {
-    const { legend } = chart;
-    const originalFit = legend.fit;
-    const margin = options?.margin || 0;
-    legend.fit = function fit() {
-      if (originalFit) {
-        originalFit.bind(this);
-      }
-      this.height += margin;
-      return;
-    };
-  },
-};

package/src/lib/components/reports/charts/plugins/scrollable-legends.ts

@@ -1,73 +0,0 @@
-import { ChartType, LegendItem, Plugin } from 'chart.js';
-import { ChartConfiguration } from 'chart.js/dist/types';
-
-export type ScrollableLegendsOptions = { containerClass?: string; active: boolean };
-
-export const scrollableLegends: Plugin<ChartType> = {
-	id: 'scrollableLegends',
-	beforeInit(chart, args, options: ScrollableLegendsOptions) {
-		if (chart.options.plugins?.legend) {
-			chart.options.plugins.legend.display = false;
-		}
-	},
-	afterUpdate(chart, args, options: ScrollableLegendsOptions) {
-		const { containerClass = 'chart-legends' } = options;
-
-		const { canvas } = chart;
-
-		function createLabel(item: LegendItem) {
-			const div = document.createElement('div');
-			div.className = `${containerClass}__legend`;
-			div.onclick = () => {
-				const { type } = chart.config as ChartConfiguration;
-				if (type === 'pie' || type === 'doughnut') {
-					chart.toggleDataVisibility(item.index);
-				} else {
-					chart.setDatasetVisibility(item.datasetIndex, !chart.isDatasetVisible(item.datasetIndex));
-				}
-				chart.update();
-			};
-
-			const boxSpan = document.createElement('small') as HTMLSpanElement;
-			boxSpan.className = `${containerClass}__box`;
-			boxSpan.style.background = `${item.fillStyle}`;
-			boxSpan.style.borderColor = `${item.strokeStyle}`;
-			boxSpan.style.borderWidth = item.lineWidth + 'px';
-
-			const textContainer = document.createElement('span');
-			textContainer.className = `${containerClass}__text`;
-			textContainer.style.color = `${item.fontColor}`;
-			textContainer.style.textDecoration = item.hidden ? 'line-through' : '';
-			const text = document.createTextNode(item.text);
-			textContainer.appendChild(text);
-
-			div.appendChild(boxSpan);
-			div.appendChild(textContainer);
-			return div;
-		}
-
-		if (canvas) {
-			const parentElement = canvas.parentElement.parentElement;
-			const items = chart.options.plugins.legend.labels.generateLabels(chart);
-			let container = parentElement.querySelector(`.${containerClass}`) as HTMLDivElement;
-			if (!container) {
-				container = document.createElement('div');
-				container.className = containerClass;
-				container.id = 'chart-legends';
-				parentElement.appendChild(container);
-			}
-			container.innerHTML = ``;
-			const labels = items.filter((itm) => !!itm.text);
-			if (labels.length > 0) {
-				container.classList.add('has-items');
-			} else {
-				container.classList.remove('has-items');
-			}
-			items.forEach((item) => {
-				if (!item.text) return;
-				const div = createLabel(item);
-				container.appendChild(div);
-			});
-		}
-	}
-};

package/src/lib/components/reports/charts/services/statistic.service.ts

@@ -1,112 +0,0 @@
-import { Injectable } from '@angular/core';
-
-import _ from 'lodash';
-import { iif, Observable, of, throwError } from 'rxjs';
-import { catchError, map, retry, tap } from 'rxjs/operators';
-import { NuxeoPagination } from '../../../../shared/models';
-import { BaseService } from '../../../../shared/services';
-import { StatisticBucket, StatisticRequestConfig } from '../models';
-
-type QueryParams = Pick<
-  StatisticRequestConfig,
-  'pageProvider' | 'headers' | 'params' | 'ignoreCache'
->;
-
-@Injectable({
-  providedIn: 'root',
-})
-export class StatisticService extends BaseService {
-  private _cache = new Map<string, NuxeoPagination<any>>();
-
-  private translatePrefix: string;
-  private bindValue: string;
-
-  prepareConfig(data: { translatePrefix?: string; bindValue?: string }) {
-    this.translatePrefix = data?.translatePrefix;
-    this.bindValue = data?.bindValue;
-  }
-
-  getStatistic({ pageProvider, headers, params, ignoreCache }: QueryParams) {
-    const key = this._generateKey({ pageProvider, headers, params });
-
-    const _getDataFromRemote$ = this.query<NuxeoPagination<any>>(
-      pageProvider,
-      params,
-      headers
-    ).pipe(
-      tap((data) => {
-        this._cache.set(key, data);
-      })
-    );
-
-    return iif(
-      () => this._cache.has(key) && !ignoreCache,
-      of(this._cache.get(key)),
-      _getDataFromRemote$
-    );
-  }
-
-  prepareStatistic(
-    config: StatisticRequestConfig,
-    params: Record<string, any> = {}
-  ): Observable<StatisticBucket[]> {
-    const hasOnQueryMethod = config?.onQuery && _.isFunction(config.onQuery);
-    let _response = null;
-    return this.getStatistic({
-      params: hasOnQueryMethod ? config?.onQuery(params) : params,
-      pageProvider: config.pageProvider,
-      headers: config?.headers,
-      ignoreCache: config?.ignoreCache,
-    }).pipe(
-      retry(config?.retryCount ?? 2),
-      catchError((error: Error) => {
-        if (config?.onError) {
-          config?.onError(error);
-        }
-        return throwError(() => error);
-      }),
-      map((res) => {
-        _response = res;
-        return _.get(res, config.propertyPath) as StatisticBucket[];
-      }),
-      map((rawData) => {
-        if (config?.transformData) {
-          return config?.transformData(rawData, _response);
-        }
-        return rawData.map((item) => {
-          return {
-            key: this._getLabel(item, config),
-            docCount: this._getValue(item, config),
-          };
-        });
-      })
-    );
-  }
-
-  private _generateKey({
-    pageProvider = '',
-    headers = {},
-    params = {},
-  }: QueryParams): string {
-    const stringifySorted = (obj: any): string =>
-      JSON.stringify(obj, Object.keys(obj).sort());
-
-    const rawKey = `${pageProvider}_${stringifySorted(headers)}_${stringifySorted(
-      params
-    )}`;
-
-    return btoa(encodeURIComponent(rawKey));
-  }
-
-  private _getLabel(item: StatisticBucket, config: StatisticRequestConfig): any {
-    const translate = (key: string) =>
-      this.translateService.instant(`${this.translatePrefix}.${key}`);
-    const label = config?.bindLabel ? _.get(item, config.bindLabel) : null;
-    return label || translate(item.key);
-  }
-
-  private _getValue(item: StatisticBucket, config: StatisticRequestConfig): any {
-    const bindValue = config?.bindValue || this.bindValue;
-    return bindValue ? _.get(item, bindValue) : item.docCount;
-  }
-}

package/src/lib/components/reports/charts/utility/colors.ts

@@ -1,112 +0,0 @@
-import colorLib from '@kurkle/color';
-import { Chart } from 'chart.js';
-
-export function transparentize(value: string, opacity: number) {
-	var alpha = opacity === undefined ? 0.5 : 1 - opacity;
-	return colorLib(value).alpha(alpha).rgbString();
-}
-
-export function colorToHex(color) {
-	// Helper function to convert a single component to hex
-	function componentToHex(c) {
-		const hex = c.toString(16);
-		return hex.length === 1 ? '0' + hex : hex;
-	}
-
-	// Helper function to validate and parse a color component
-	function parseComponent(value, maxValue) {
-		value = parseFloat(value);
-		return isNaN(value) ? 0 : Math.min(maxValue, Math.max(0, value));
-	}
-
-	if (typeof color === 'string') {
-		// If the input is a string, attempt to parse it as a CSS color
-		const tempDiv = document.createElement('div');
-		tempDiv.style.color = color;
-		document.body.appendChild(tempDiv);
-		const computedColor = window.getComputedStyle(tempDiv).color;
-		document.body.removeChild(tempDiv);
-		color = computedColor;
-	}
-
-	if (color.startsWith('#')) {
-		// Hexadecimal color
-		return color.toUpperCase();
-	} else if (color.startsWith('rgb') || color.startsWith('hsl')) {
-		// RGB, RGBA, HSL, HSLA color
-		const rgba = color.match(/(0?\.?\d{1,3})%?\b/g).map((component, index) => {
-			return index < 3 ? Math.round(parseComponent(component, 255)) : parseFloat(component);
-		});
-
-		return `#${componentToHex(rgba[0])}${componentToHex(rgba[1])}${componentToHex(rgba[2])}`;
-	}
-
-	// Unsupported color format, return input
-	return color;
-}
-
-// Function to convert hex to RGB
-export function hexToRgb(hex: string): { r: number; g: number; b: number } {
-	let r = parseInt(hex.slice(1, 3), 16);
-	let g = parseInt(hex.slice(3, 5), 16);
-	let b = parseInt(hex.slice(5, 7), 16);
-	return { r, g, b };
-}
-
-// Function to convert RGB to hex
-export function rgbToHex(r: number, g: number, b: number): string {
-	return `#${((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1).toUpperCase()}`;
-}
-
-// Function to create a tint (lighten the color)
-export function createTint(color: string, amount: number): string {
-	const { r, g, b } = hexToRgb(color);
-	return rgbToHex(Math.min(255, r + amount), Math.min(255, g + amount), Math.min(255, b + amount));
-}
-
-// Function to create a shade (darken the color)
-export function createShade(color: string, amount: number): string {
-	const { r, g, b } = hexToRgb(color);
-	return rgbToHex(Math.max(0, r - amount), Math.max(0, g - amount), Math.max(0, b - amount));
-}
-
-// Function to create multiple tints or shades
-export function createColorVariants(
-	color: string,
-	length: number,
-	type: 'tint' | 'shade' = 'tint',
-	amount = 43
-): string[] {
-	let variants: string[] = [];
-	for (let i = 1; i <= length; i++) {
-		if (type === 'tint') {
-			variants.push(createTint(color, i * amount)); // Adjust the step size (here it's 40)
-		} else {
-			variants.push(createShade(color, i * amount)); // Adjust the step size (here it's 20)
-		}
-	}
-	return variants;
-}
-
-export function createConicGradient(chart: Chart, colors: { startColor: string; endColor: string }) {
-	const { ctx, chartArea } = chart;
-	if (!chartArea || !('createConicGradient' in ctx)) {
-		return null;
-	}
-
-	const { left, width, top, height } = chartArea;
-
-	//@ts-ignore
-	const gradient = ctx.createConicGradient(0, left + width / 2, top + height / 2);
-	gradient.addColorStop(0, colors?.startColor);
-	gradient.addColorStop(1, colors?.endColor);
-
-	return gradient;
-}
-
-// Check if the string is a valid CSS color
-export function isColor(str: string): boolean {
-	const s = new Option().style;
-	s.color = str;
-	return s.color !== '';
-}

package/src/lib/components/reports/charts/utility/common.ts

@@ -1,12 +0,0 @@
-import { ChartDataset, ChartType } from 'chart.js';
-import { StatisticBucket } from '../models';
-
-export function flatArray<T = StatisticBucket>(data: T[][]): T[] {
-	return data.reduce((acc, curr) => acc.concat(curr), []);
-}
-
-export function isObject<T extends ChartType>(
-	obj: any
-): obj is Partial<ChartDataset<T>> {
-	return obj && typeof obj === 'object';
-}