mdt-charts 1.29.0 → 1.30.0

package/lib/main.js

@@ -2,85 +2,90 @@ 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(options) {
+        this.engine.clearSelection(this.model, { firePublicEvent: options === null || options === void 0 ? void 0 : options.fireEvent });
+    }
+    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,31 +1,29 @@
 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,23 +1,28 @@
 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,28 +2,18 @@ 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,75 +2,66 @@ 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();