mdt-charts 1.28.2 → 1.29.0

package/lib/main.js

@@ -2,90 +2,85 @@ import { Engine } from "./engine/engine";
 import { assembleModel, getPreparedData } from "./model/modelBuilder";
 import { PublicOptionsService } from "./optionsServices/publicOptionsService";
 export class Chart {
-    /**
-     * @param config Объект конфигуратора
-     * @param designerConfig Объект конфигуратора дизайнера
-     * @param data Данные
-     * @param isResizable Флаг подстройки размера блока графика под родительский элемент
-     * @param filterCallback Функция коллбэк, вызываемая во время клика на элемент графика. Предназначена для обеспечения кросс-фильтрации
-     * @param selectedIds Id выделенных записей
-     */
-    constructor(config, designerConfig, data, isResizable = false, filterCallback = null, selectedIds = []) {
-        this.resizeHandler = this.resizeListener.bind(this);
-        Chart.chartCounter++;
-        this.id = Chart.chartCounter;
-        this.config = config;
-        this.designerConfig = designerConfig;
-        this.data = data;
-        this.isResizable = isResizable;
-        this.model = assembleModel(this.config, this.data, this.designerConfig, this.id);
-        this.engine = new Engine(this.id, filterCallback, selectedIds);
-    }
-    /**
-     * Рендер графика
-     * @param parentElement родительский элемент для графика
-     */
-    render(parentElement) {
-        this.parentElement = parentElement;
-        this.engine.render(this.model, getPreparedData(this.model, this.data, this.config), this.parentElement);
-        if (this.isResizable)
-            this.registerResizeEvent();
-    }
-    /**
-     * Удаление графика со страницы
-     */
-    destroy() {
-        this.engine.destroy();
-        if (this.isResizable)
-            this.removeResizeEvent();
-    }
-    /**
-     * Обновление графика для новых данных
-     * @param data Новые данные
-     */
-    updateData(data) {
-        this.model = assembleModel(this.config, data, this.designerConfig, this.id);
-        this.data = data;
-        this.engine.updateData(this.model, getPreparedData(this.model, this.data, this.config));
-    }
-    /**
-     * Изменение размера блока с графиком
-     * @param newSize Новый размер
-     */
-    updateSize(newSize) {
-        if (!PublicOptionsService.validateSize(newSize))
-            return;
-        if (newSize.height)
-            this.config.canvas.size.height = newSize.height;
-        if (newSize.width)
-            this.config.canvas.size.width = newSize.width;
-        this.model = assembleModel(this.config, this.data, this.designerConfig, this.id);
-        this.engine.updateFullBlock(this.model, getPreparedData(this.model, this.data, this.config));
-    }
-    /**
-     * Обновление цветов графиков на основе новых базовых цветов
-     * @param newColors Новые базовые цвета
-     */
-    updateColors(newColors) {
-        this.designerConfig.chartStyle.baseColors = [...newColors];
-        this.model = assembleModel(this.config, this.data, this.designerConfig, this.id);
-        this.engine.updateColors(this.model);
-    }
-    clearSelection() {
-        this.engine.clearSelection(this.model);
-    }
-    registerResizeEvent() {
-        window.addEventListener("resize", this.resizeHandler);
-    }
-    removeResizeEvent() {
-        window.removeEventListener("resize", this.resizeHandler);
-    }
-    resizeListener() {
-        this.updateSize({
-            height: null,
-            width: this.parentElement.offsetWidth
-        });
-    }
+	/**
+	 * @param config Объект конфигуратора
+	 * @param designerConfig Объект конфигуратора дизайнера
+	 * @param data Данные
+	 * @param isResizable Флаг подстройки размера блока графика под родительский элемент
+	 * @param filterCallback Функция коллбэк, вызываемая во время клика на элемент графика. Предназначена для обеспечения кросс-фильтрации
+	 * @param selectedIds Id выделенных записей
+	 */
+	constructor(config, designerConfig, data, isResizable = false, filterCallback = null, selectedIds = []) {
+		this.resizeHandler = this.resizeListener.bind(this);
+		Chart.chartCounter++;
+		this.id = Chart.chartCounter;
+		this.config = config;
+		this.designerConfig = designerConfig;
+		this.data = data;
+		this.isResizable = isResizable;
+		this.model = assembleModel(this.config, this.data, this.designerConfig, this.id);
+		this.engine = new Engine(this.id, filterCallback, selectedIds);
+	}
+	/**
+	 * Рендер графика
+	 * @param parentElement родительский элемент для графика
+	 */
+	render(parentElement) {
+		this.parentElement = parentElement;
+		this.engine.render(this.model, getPreparedData(this.model, this.data, this.config), this.parentElement);
+		if (this.isResizable) this.registerResizeEvent();
+	}
+	/**
+	 * Удаление графика со страницы
+	 */
+	destroy() {
+		this.engine.destroy();
+		if (this.isResizable) this.removeResizeEvent();
+	}
+	/**
+	 * Обновление графика для новых данных
+	 * @param data Новые данные
+	 */
+	updateData(data) {
+		this.model = assembleModel(this.config, data, this.designerConfig, this.id);
+		this.data = data;
+		this.engine.updateData(this.model, getPreparedData(this.model, this.data, this.config));
+	}
+	/**
+	 * Изменение размера блока с графиком
+	 * @param newSize Новый размер
+	 */
+	updateSize(newSize) {
+		if (!PublicOptionsService.validateSize(newSize)) return;
+		if (newSize.height) this.config.canvas.size.height = newSize.height;
+		if (newSize.width) this.config.canvas.size.width = newSize.width;
+		this.model = assembleModel(this.config, this.data, this.designerConfig, this.id);
+		this.engine.updateFullBlock(this.model, getPreparedData(this.model, this.data, this.config));
+	}
+	/**
+	 * Обновление цветов графиков на основе новых базовых цветов
+	 * @param newColors Новые базовые цвета
+	 */
+	updateColors(newColors) {
+		this.designerConfig.chartStyle.baseColors = [...newColors];
+		this.model = assembleModel(this.config, this.data, this.designerConfig, this.id);
+		this.engine.updateColors(this.model);
+	}
+	clearSelection() {
+		this.engine.clearSelection(this.model);
+	}
+	registerResizeEvent() {
+		window.addEventListener("resize", this.resizeHandler);
+	}
+	removeResizeEvent() {
+		window.removeEventListener("resize", this.resizeHandler);
+	}
+	resizeListener() {
+		this.updateSize({
+			height: null,
+			width: this.parentElement.offsetWidth
+		});
+	}
 }
 Chart.chartCounter = 0;
 export * from "./config/config";

package/lib/model/EventEmitter.d.ts

@@ -1,10 +1,10 @@
 export declare class EventEmitter<E = Record<string, Record<string, any>>> {
-    private events;
-    subscribe<T extends keyof E>(code: T, listener: (args: E[T]) => void): () => void;
-    unsubscribe<T extends keyof E>(code: T, listener: (args: E[T]) => void): void;
-    emit<T extends keyof E>(code: T, args?: E[T]): void;
-    getSubscribeController(): {
-        subscribe: <T extends keyof E>(code: T, listener: (args: E[T]) => void) => () => void;
-        unsubscribe: <T_1 extends keyof E>(code: T_1, listener: (args: E[T_1]) => void) => void;
-    };
+	private events;
+	subscribe<T extends keyof E>(code: T, listener: (args: E[T]) => void): () => void;
+	unsubscribe<T extends keyof E>(code: T, listener: (args: E[T]) => void): void;
+	emit<T extends keyof E>(code: T, args?: E[T]): void;
+	getSubscribeController(): {
+		subscribe: <T extends keyof E>(code: T, listener: (args: E[T]) => void) => () => void;
+		unsubscribe: <T_1 extends keyof E>(code: T_1, listener: (args: E[T_1]) => void) => void;
+	};
 }

package/lib/model/EventEmitter.js

@@ -1,26 +1,26 @@
 export class EventEmitter {
-    constructor() {
-        this.events = {};
-    }
-    subscribe(code, listener) {
-        if (!this.events[code])
-            this.events[code] = [];
-        this.events[code].push(listener);
-        return () => this.unsubscribe(code, listener);
-    }
-    unsubscribe(code, listener) {
-        var _a;
-        this.events[code] = (_a = this.events[code]) === null || _a === void 0 ? void 0 : _a.filter((cur) => cur != listener);
-    }
-    emit(code, args) {
-        (this.events[code] || []).forEach((callback) => {
-            callback(args);
-        });
-    }
-    getSubscribeController() {
-        return {
-            subscribe: (code, listener) => this.subscribe(code, listener),
-            unsubscribe: (code, listener) => this.unsubscribe(code, listener)
-        };
-    }
+	constructor() {
+		this.events = {};
+	}
+	subscribe(code, listener) {
+		if (!this.events[code]) this.events[code] = [];
+		this.events[code].push(listener);
+		return () => this.unsubscribe(code, listener);
+	}
+	unsubscribe(code, listener) {
+		var _a;
+		this.events[code] =
+			(_a = this.events[code]) === null || _a === void 0 ? void 0 : _a.filter((cur) => cur != listener);
+	}
+	emit(code, args) {
+		(this.events[code] || []).forEach((callback) => {
+			callback(args);
+		});
+	}
+	getSubscribeController() {
+		return {
+			subscribe: (code, listener) => this.subscribe(code, listener),
+			unsubscribe: (code, listener) => this.unsubscribe(code, listener)
+		};
+	}
 }

package/lib/model/chartStyleModel/chartStyleModel.d.ts

@@ -1,9 +1,9 @@
 import { ChartStyleConfig } from "../../designer/designerConfig";
 import { ChartStyle } from "../model";
 export declare class ChartStyleModelService {
-    private static standardColors;
-    static getCssClasses(chartIndex: number): string[];
-    static getChartStyle(elementsAmount: number, styleConfig: ChartStyleConfig): ChartStyle;
-    static getColorSet(baseColors: string[], elementsAmount: number): string[];
-    static checkAndGet(baseColors: string[]): string[];
+	private static standardColors;
+	static getCssClasses(chartIndex: number): string[];
+	static getChartStyle(elementsAmount: number, styleConfig: ChartStyleConfig): ChartStyle;
+	static getColorSet(baseColors: string[], elementsAmount: number): string[];
+	static checkAndGet(baseColors: string[]): string[];
 }

package/lib/model/chartStyleModel/chartStyleModel.js

@@ -1,29 +1,31 @@
 import * as chroma from "chroma-js";
 export class ChartStyleModelService {
-    static getCssClasses(chartIndex) {
-        const cssClasses = [`chart-${chartIndex}`];
-        return cssClasses;
-    }
-    static getChartStyle(elementsAmount, styleConfig) {
-        const baseColors = this.checkAndGet(styleConfig.baseColors);
-        return {
-            elementColors: this.getColorSet(baseColors, elementsAmount),
-            opacity: 1
-        };
-    }
-    static getColorSet(baseColors, elementsAmount) {
-        return chroma
-            .scale(baseColors)
-            .mode("rgb")
-            .domain([0, 0.55, 0.75, 1])
-            .colors(elementsAmount <= 1 ? 2 : elementsAmount);
-    }
-    static checkAndGet(baseColors) {
-        if (baseColors.length === 0 ||
-            baseColors.filter((color) => color === "rgba(0, 0, 0, 0)" || !color).length > 0) {
-            return this.standardColors;
-        }
-        return baseColors;
-    }
+	static getCssClasses(chartIndex) {
+		const cssClasses = [`chart-${chartIndex}`];
+		return cssClasses;
+	}
+	static getChartStyle(elementsAmount, styleConfig) {
+		const baseColors = this.checkAndGet(styleConfig.baseColors);
+		return {
+			elementColors: this.getColorSet(baseColors, elementsAmount),
+			opacity: 1
+		};
+	}
+	static getColorSet(baseColors, elementsAmount) {
+		return chroma
+			.scale(baseColors)
+			.mode("rgb")
+			.domain([0, 0.55, 0.75, 1])
+			.colors(elementsAmount <= 1 ? 2 : elementsAmount);
+	}
+	static checkAndGet(baseColors) {
+		if (
+			baseColors.length === 0 ||
+			baseColors.filter((color) => color === "rgba(0, 0, 0, 0)" || !color).length > 0
+		) {
+			return this.standardColors;
+		}
+		return baseColors;
+	}
 }
 ChartStyleModelService.standardColors = ["#209DE3", "#FF3131", "#FFBA00", "#20B078"];

package/lib/model/chartStyleModel/colorRange.d.ts

@@ -1,7 +1,7 @@
 import { MdtChartsColorRangeItem } from "../../config/config";
 export declare class ColorRangeManager {
-    private sortedRange;
-    constructor(range: MdtChartsColorRangeItem[]);
-    getColorByValue(value: number): string;
+	private sortedRange;
+	constructor(range: MdtChartsColorRangeItem[]);
+	getColorByValue(value: number): string;
 }
 export declare function sortColorRange(colorRange: MdtChartsColorRangeItem[]): MdtChartsColorRangeItem[];

package/lib/model/chartStyleModel/colorRange.js

@@ -1,28 +1,23 @@
 export class ColorRangeManager {
-    constructor(range) {
-        this.sortedRange = sortColorRange(range);
-    }
-    getColorByValue(value) {
-        for (let i = 0; i < this.sortedRange.length; i++) {
-            const currentItem = this.sortedRange[i];
-            const nextItem = this.sortedRange[i + 1];
-            if (!nextItem)
-                return currentItem.color;
-            if (currentItem.value == null && value < nextItem.value)
-                return currentItem.color;
-            if (currentItem.value === value)
-                return currentItem.color;
-            if (value >= currentItem.value && value < nextItem.value)
-                return currentItem.color;
-        }
-    }
+	constructor(range) {
+		this.sortedRange = sortColorRange(range);
+	}
+	getColorByValue(value) {
+		for (let i = 0; i < this.sortedRange.length; i++) {
+			const currentItem = this.sortedRange[i];
+			const nextItem = this.sortedRange[i + 1];
+			if (!nextItem) return currentItem.color;
+			if (currentItem.value == null && value < nextItem.value) return currentItem.color;
+			if (currentItem.value === value) return currentItem.color;
+			if (value >= currentItem.value && value < nextItem.value) return currentItem.color;
+		}
+	}
 }
 export function sortColorRange(colorRange) {
-    const range = [...colorRange];
-    range.sort((a, b) => {
-        if (a.value == null)
-            return -1;
-        return a.value < b.value ? -1 : a.value == b.value ? 0 : 1;
-    });
-    return range;
+	const range = [...colorRange];
+	range.sort((a, b) => {
+		if (a.value == null) return -1;
+		return a.value < b.value ? -1 : a.value == b.value ? 0 : 1;
+	});
+	return range;
 }

package/lib/model/chartStyleModel/twoDimensionalChartStyleModel.d.ts

@@ -2,18 +2,28 @@ import { MdtChartsTwoDimensionalChart, TwoDimensionalChartType } from "../../con
 import { ChartStyleConfig } from "../../designer/designerConfig";
 import { ChartStyle } from "../model";
 export declare class TwoDimensionalChartStyleModel {
-    private charts;
-    private chartStyleConfig;
-    private service;
-    constructor(charts: MdtChartsTwoDimensionalChart[], chartStyleConfig: ChartStyleConfig);
-    getChartStyle(chart: MdtChartsTwoDimensionalChart, chartIndex: number): ChartStyle;
-    private getChartsValueFieldsAmounts;
+	private charts;
+	private chartStyleConfig;
+	private service;
+	constructor(charts: MdtChartsTwoDimensionalChart[], chartStyleConfig: ChartStyleConfig);
+	getChartStyle(chart: MdtChartsTwoDimensionalChart, chartIndex: number): ChartStyle;
+	private getChartsValueFieldsAmounts;
 }
 export declare class TwoDimensionalChartStyleService {
-    getChartColors(chart: MdtChartsTwoDimensionalChart, styleConfig: ChartStyleConfig, chartsFieldsAmounts: number[], chartIndex: number): string[];
-    getChartOpacity(chartsLength: number, chartType: TwoDimensionalChartType, chartsValueFieldAmount: number, isChartSegmented: boolean): number;
-    private generateNewChartColors;
-    private isMoreThanOneValueFieldOnCanvas;
-    private makeColorsBrighter;
-    private getStartIndex;
+	getChartColors(
+		chart: MdtChartsTwoDimensionalChart,
+		styleConfig: ChartStyleConfig,
+		chartsFieldsAmounts: number[],
+		chartIndex: number
+	): string[];
+	getChartOpacity(
+		chartsLength: number,
+		chartType: TwoDimensionalChartType,
+		chartsValueFieldAmount: number,
+		isChartSegmented: boolean
+	): number;
+	private generateNewChartColors;
+	private isMoreThanOneValueFieldOnCanvas;
+	private makeColorsBrighter;
+	private getStartIndex;
 }

package/lib/model/chartStyleModel/twoDimensionalChartStyleModel.js

@@ -2,66 +2,75 @@ import * as chroma from "chroma-js";
 import { ModelHelper } from "../helpers/modelHelper";
 import { ChartStyleModelService } from "./chartStyleModel";
 export class TwoDimensionalChartStyleModel {
-    constructor(charts, chartStyleConfig) {
-        this.charts = charts;
-        this.chartStyleConfig = chartStyleConfig;
-        this.service = new TwoDimensionalChartStyleService();
-    }
-    getChartStyle(chart, chartIndex) {
-        var _a, _b;
-        const fieldsAmounts = this.getChartsValueFieldsAmounts();
-        const opacity = chart.type === "area" && ((_b = (_a = chart.areaStyles) === null || _a === void 0 ? void 0 : _a.gradient) === null || _b === void 0 ? void 0 : _b.on)
-            ? 1
-            : this.service.getChartOpacity(this.charts.length, chart.type, fieldsAmounts[chartIndex], chart.isSegmented);
-        return {
-            elementColors: this.service.getChartColors(chart, this.chartStyleConfig, fieldsAmounts, chartIndex),
-            opacity
-        };
-    }
-    getChartsValueFieldsAmounts() {
-        return this.charts.map((chart) => chart.data.valueFields.length);
-    }
+	constructor(charts, chartStyleConfig) {
+		this.charts = charts;
+		this.chartStyleConfig = chartStyleConfig;
+		this.service = new TwoDimensionalChartStyleService();
+	}
+	getChartStyle(chart, chartIndex) {
+		var _a, _b;
+		const fieldsAmounts = this.getChartsValueFieldsAmounts();
+		const opacity =
+			chart.type === "area" &&
+			((_b = (_a = chart.areaStyles) === null || _a === void 0 ? void 0 : _a.gradient) === null || _b === void 0
+				? void 0
+				: _b.on)
+				? 1
+				: this.service.getChartOpacity(
+						this.charts.length,
+						chart.type,
+						fieldsAmounts[chartIndex],
+						chart.isSegmented
+				  );
+		return {
+			elementColors: this.service.getChartColors(chart, this.chartStyleConfig, fieldsAmounts, chartIndex),
+			opacity
+		};
+	}
+	getChartsValueFieldsAmounts() {
+		return this.charts.map((chart) => chart.data.valueFields.length);
+	}
 }
 export class TwoDimensionalChartStyleService {
-    getChartColors(chart, styleConfig, chartsFieldsAmounts, chartIndex) {
-        const generatedColors = this.generateNewChartColors(chart.type, styleConfig, chartsFieldsAmounts, chartIndex);
-        chart.data.valueFields.forEach((field, fieldIndex) => {
-            if (field.color)
-                generatedColors[fieldIndex] = field.color;
-        });
-        return generatedColors;
-    }
-    getChartOpacity(chartsLength, chartType, chartsValueFieldAmount, isChartSegmented) {
-        if (chartType === "area" &&
-            this.isMoreThanOneValueFieldOnCanvas(chartsLength, chartsValueFieldAmount) &&
-            !isChartSegmented)
-            return 0.5; // combined area with other charts has 0.5 opacity
-        return 1;
-    }
-    generateNewChartColors(chartType, styleConfig, chartsFieldsAmounts, chartIndex) {
-        const startIndex = this.getStartIndex(chartIndex, chartsFieldsAmounts);
-        const baseColors = ChartStyleModelService.checkAndGet(styleConfig.baseColors);
-        const palette = ChartStyleModelService.getColorSet(baseColors, ModelHelper.getSum(chartsFieldsAmounts));
-        const elementsAmount = chartsFieldsAmounts[chartIndex];
-        const selectedColors = palette.slice(startIndex, startIndex + elementsAmount);
-        if (chartType !== "line")
-            return selectedColors;
-        this.makeColorsBrighter(selectedColors);
-        return selectedColors;
-    }
-    isMoreThanOneValueFieldOnCanvas(chartsLength, chartsValueFieldAmount) {
-        return chartsLength > 1 || chartsValueFieldAmount > 1;
-    }
-    makeColorsBrighter(initialColors) {
-        for (let i = 0; i < initialColors.length; i++) {
-            initialColors[i] = chroma.mix(initialColors[i], "white", 0.2).saturate(3).hex();
-        }
-    }
-    getStartIndex(chartIndex, chartsFieldsAmounts) {
-        let startIndex = 0;
-        for (let i = 0; i < chartIndex; i++) {
-            startIndex += chartsFieldsAmounts[i];
-        }
-        return startIndex;
-    }
+	getChartColors(chart, styleConfig, chartsFieldsAmounts, chartIndex) {
+		const generatedColors = this.generateNewChartColors(chart.type, styleConfig, chartsFieldsAmounts, chartIndex);
+		chart.data.valueFields.forEach((field, fieldIndex) => {
+			if (field.color) generatedColors[fieldIndex] = field.color;
+		});
+		return generatedColors;
+	}
+	getChartOpacity(chartsLength, chartType, chartsValueFieldAmount, isChartSegmented) {
+		if (
+			chartType === "area" &&
+			this.isMoreThanOneValueFieldOnCanvas(chartsLength, chartsValueFieldAmount) &&
+			!isChartSegmented
+		)
+			return 0.5; // combined area with other charts has 0.5 opacity
+		return 1;
+	}
+	generateNewChartColors(chartType, styleConfig, chartsFieldsAmounts, chartIndex) {
+		const startIndex = this.getStartIndex(chartIndex, chartsFieldsAmounts);
+		const baseColors = ChartStyleModelService.checkAndGet(styleConfig.baseColors);
+		const palette = ChartStyleModelService.getColorSet(baseColors, ModelHelper.getSum(chartsFieldsAmounts));
+		const elementsAmount = chartsFieldsAmounts[chartIndex];
+		const selectedColors = palette.slice(startIndex, startIndex + elementsAmount);
+		if (chartType !== "line") return selectedColors;
+		this.makeColorsBrighter(selectedColors);
+		return selectedColors;
+	}
+	isMoreThanOneValueFieldOnCanvas(chartsLength, chartsValueFieldAmount) {
+		return chartsLength > 1 || chartsValueFieldAmount > 1;
+	}
+	makeColorsBrighter(initialColors) {
+		for (let i = 0; i < initialColors.length; i++) {
+			initialColors[i] = chroma.mix(initialColors[i], "white", 0.2).saturate(3).hex();
+		}
+	}
+	getStartIndex(chartIndex, chartsFieldsAmounts) {
+		let startIndex = 0;
+		for (let i = 0; i < chartIndex; i++) {
+			startIndex += chartsFieldsAmounts[i];
+		}
+		return startIndex;
+	}
 }

package/lib/model/configsValidator/configValidator.d.ts

@@ -1,5 +1,5 @@
 import { Size } from "../../config/config";
 export declare class ConfigValidatorClass {
-    validateCanvasSize(size: Size): boolean;
+	validateCanvasSize(size: Size): boolean;
 }
 export declare const ConfigValidator: ConfigValidatorClass;

package/lib/model/configsValidator/configValidator.js

@@ -1,7 +1,7 @@
 export class ConfigValidatorClass {
-    validateCanvasSize(size) {
-        const validateSide = (side) => typeof side === "number" && side >= 0;
-        return validateSide(size.width) && validateSide(size.height);
-    }
+	validateCanvasSize(size) {
+		const validateSide = (side) => typeof side === "number" && side >= 0;
+		return validateSide(size.width) && validateSide(size.height);
+	}
 }
 export const ConfigValidator = new ConfigValidatorClass();