mdt-charts 1.28.1 → 1.29.0

package/lib/model/featuresModel/axisModel.js

@@ -9,174 +9,229 @@ export const MINIMAL_HORIZONTAL_STEP_SIZE = 100;
 export const LABEL_ELEMENT_HEIGHT_PX = 17;
 const DEFAULT_AXIS_LINE_VISIBLE = true;
 export class AxisModel {
-    static getKeyAxis(options, data, labelConfig, canvasModel, tooltipSettings, getZeroCoordinate) {
-        var _a, _b, _c;
-        const { charts, orientation, data: dataOptions } = options;
-        const axisConfig = options.axis.key;
-        const translate = this.getKeyAxisTranslateModel(orientation, axisConfig.position, canvasModel, getZeroCoordinate);
-        const tickCalculator = new AxisModelTickCalculator(data[dataOptions.dataSource], (_a = options.axis.key.labels) === null || _a === void 0 ? void 0 : _a.showRule);
-        return {
-            type: "key",
-            orient: AxisModel.getAxisOrient(AxisType.Key, orientation, axisConfig.position),
-            translate,
-            cssClass: "key-axis",
-            ticks: axisConfig.ticks,
-            labels: {
-                maxSize: AxisModel.getLabelSize(labelConfig.maxSize.main, data[dataOptions.dataSource].map((d) => d[dataOptions.keyField.name])).width,
-                position: AxisModel.getKeyAxisLabelPosition(canvasModel, DataManagerModel.getDataValuesByKeyField(data, dataOptions.dataSource, dataOptions.keyField.name)
-                    .length, axisConfig),
-                visible: !TwoDimensionalModel.getChartsEmbeddedLabelsFlag(charts, orientation),
-                defaultTooltip: tooltipSettings.position === "fixed",
-                showTick: tickCalculator.createFunctionCalculator(this.getAxisLength(orientation, canvasModel)),
-                linearTickStep: MINIMAL_HORIZONTAL_STEP_SIZE,
-                tickAmountSettings: {
-                    policy: { type: "auto" }
-                }
-            },
-            visibility: axisConfig.visibility,
-            line: {
-                visible: (_c = (_b = axisConfig.line) === null || _b === void 0 ? void 0 : _b.visible) !== null && _c !== void 0 ? _c : DEFAULT_AXIS_LINE_VISIBLE
-            },
-            browserTooltip: {
-                format: (value) => value
-            }
-        };
-    }
-    static getMainValueAxis(defaultFormatter, orient, position, axisConfig, labelConfig, canvasModel, scaleInfo) {
-        return this.getValueAxis(defaultFormatter, orient, position, "value-axis", axisConfig, labelConfig, canvasModel, scaleInfo);
-    }
-    static getSecondaryValueAxis(defaultFormatter, orient, mainAxisPosition, axisConfig, labelConfig, canvasModel, scaleInfo) {
-        return this.getValueAxis(defaultFormatter, orient, mainAxisPosition === "start" ? "end" : "start", "value-secondary-axis", axisConfig, labelConfig, canvasModel, scaleInfo);
-    }
-    static getValueAxis(defaultFormatter, orient, position, cssClass, axisConfig, labelConfig, canvasModel, scaleInfo) {
-        var _a, _b;
-        return {
-            type: "value",
-            orient: AxisModel.getAxisOrient(AxisType.Value, orient, position),
-            translate: {
-                translateX: AxisModel.getAxisTranslateX(AxisType.Value, orient, position, canvasModel),
-                translateY: AxisModel.getAxisTranslateY(AxisType.Value, orient, position, canvasModel)
-            },
-            cssClass,
-            ticks: axisConfig.ticks,
-            labels: {
-                maxSize: labelConfig.maxSize.main,
-                position: "straight",
-                visible: true,
-                defaultTooltip: true,
-                showTick: showAllTicks,
-                linearTickStep: this.getTickStep(orient, axisConfig),
-                tickAmountSettings: {
-                    policy: this.getTickAmountPolicy(orient, axisConfig, scaleInfo)
-                }
-            },
-            visibility: axisConfig.visibility,
-            line: {
-                visible: (_b = (_a = axisConfig.line) === null || _a === void 0 ? void 0 : _a.visible) !== null && _b !== void 0 ? _b : DEFAULT_AXIS_LINE_VISIBLE
-            },
-            browserTooltip: {
-                format: (value) => defaultFormatter(value)
-            }
-        };
-    }
-    static getAxisLength(chartOrientation, canvasModel) {
-        if (chartOrientation === "horizontal") {
-            return canvasModel.getChartBlockHeight();
-        }
-        else {
-            return canvasModel.getChartBlockWidth();
-        }
-    }
-    static getAxisOrient(axisType, chartOrientation, axisPosition) {
-        if (chartOrientation === "vertical") {
-            if (axisPosition === "start")
-                return axisType === AxisType.Key ? "top" : "left";
-            return axisType === AxisType.Key ? "bottom" : "right";
-        }
-        if (axisPosition === "start")
-            return axisType === AxisType.Key ? "left" : "top";
-        return axisType === AxisType.Key ? "right" : "bottom";
-    }
-    static getAxisTranslateX(axisType, chartOrientation, axisPosition, canvasModel) {
-        const orient = AxisModel.getAxisOrient(axisType, chartOrientation, axisPosition);
-        if (orient === "top" || orient === "left")
-            return canvasModel.getMarginSide("left");
-        else if (orient === "bottom")
-            return canvasModel.getMarginSide("left");
-        return canvasModel.getBlockSize().width - canvasModel.getMarginSide("right");
-    }
-    static getAxisTranslateY(axisType, chartOrientation, axisPosition, canvasModel) {
-        const orient = AxisModel.getAxisOrient(axisType, chartOrientation, axisPosition);
-        if (orient === "top" || orient === "left")
-            return canvasModel.getMarginSide("top");
-        else if (orient === "bottom")
-            return canvasModel.getBlockSize().height - canvasModel.getMarginSide("bottom");
-        return canvasModel.getMarginSide("top");
-    }
-    static getKeyAxisLabelPosition(canvasModel, scopedDataLength, axisConfig) {
-        var _a;
-        return this.service.getKeyAxisLabelPosition(canvasModel.getChartBlockWidth(), scopedDataLength, (_a = axisConfig === null || axisConfig === void 0 ? void 0 : axisConfig.labels) === null || _a === void 0 ? void 0 : _a.position);
-    }
-    static getLabelSize(labelMaxWidth, labelTexts) {
-        const ONE_UPPER_SYMBOL_WIDTH_PX = 8;
-        const longestLabelLength = labelTexts.length
-            ? Math.max(...labelTexts.map((t) => ModelHelper.getStringScore(t)))
-            : 0;
-        const longestLabelWidth = ONE_UPPER_SYMBOL_WIDTH_PX * longestLabelLength;
-        return {
-            height: LABEL_ELEMENT_HEIGHT_PX,
-            width: longestLabelWidth > labelMaxWidth ? labelMaxWidth : longestLabelWidth
-        };
-    }
-    static getRoundValue(value) {
-        const absValue = Math.abs(value);
-        const sign = Math.sign(value);
-        if (absValue < 10)
-            return value;
-        if (absValue < 100)
-            return sign * Math.floor(absValue / 10) * 10;
-        const valueStr = absValue.toString();
-        const firstTwoDigits = Math.floor(absValue / Math.pow(10, valueStr.length - 2));
-        const roundedFirstTwoDigits = firstTwoDigits < 10 ? firstTwoDigits : Math.floor(firstTwoDigits / 5) * 5;
-        const roundedNumber = roundedFirstTwoDigits * Math.pow(10, valueStr.length - 2);
-        return sign * roundedNumber;
-    }
-    static getTickAmountPolicy(orient, axisConfig, scaleInfo) {
-        const axisLength = scaleInfo.range.end - scaleInfo.range.start;
-        const linearTickStep = this.getTickStep(orient, axisConfig);
-        let tickAmountPolicy;
-        if (Math.floor(axisLength / linearTickStep) > 2) {
-            tickAmountPolicy = { type: "amount", amount: Math.floor(axisLength / linearTickStep) };
-        }
-        else {
-            const roundedMaxValue = this.getRoundValue(max(scaleInfo.domain));
-            tickAmountPolicy = { type: "constant", values: [min(scaleInfo.domain), roundedMaxValue] };
-        }
-        return tickAmountPolicy;
-    }
-    static getKeyAxisTranslateModel(chartOrientation, axisPosition, canvasModel, getZeroCoordinate) {
-        let translateY;
-        let translateX;
-        if (chartOrientation === "vertical") {
-            translateY = getZeroCoordinate
-                ? getZeroCoordinate() + canvasModel.getMarginSide("top")
-                : AxisModel.getAxisTranslateY(AxisType.Key, chartOrientation, axisPosition, canvasModel);
-            translateX = AxisModel.getAxisTranslateX(AxisType.Key, chartOrientation, axisPosition, canvasModel);
-        }
-        else {
-            translateX = getZeroCoordinate
-                ? getZeroCoordinate() + canvasModel.getMarginSide("left")
-                : AxisModel.getAxisTranslateX(AxisType.Key, chartOrientation, axisPosition, canvasModel);
-            translateY = AxisModel.getAxisTranslateY(AxisType.Key, chartOrientation, axisPosition, canvasModel);
-        }
-        return {
-            translateX,
-            translateY
-        };
-    }
-    static getTickStep(orient, axisConfig) {
-        var _a, _b;
-        return ((_b = (_a = axisConfig.labels) === null || _a === void 0 ? void 0 : _a.stepSize) !== null && _b !== void 0 ? _b : (orient === "horizontal" ? MINIMAL_HORIZONTAL_STEP_SIZE : MINIMAL_VERTICAL_STEP_SIZE));
-    }
+	static getKeyAxis(options, data, labelConfig, canvasModel, tooltipSettings, getZeroCoordinate) {
+		var _a, _b, _c;
+		const { charts, orientation, data: dataOptions } = options;
+		const axisConfig = options.axis.key;
+		const translate = this.getKeyAxisTranslateModel(
+			orientation,
+			axisConfig.position,
+			canvasModel,
+			getZeroCoordinate
+		);
+		const tickCalculator = new AxisModelTickCalculator(
+			data[dataOptions.dataSource],
+			(_a = options.axis.key.labels) === null || _a === void 0 ? void 0 : _a.showRule
+		);
+		return {
+			type: "key",
+			orient: AxisModel.getAxisOrient(AxisType.Key, orientation, axisConfig.position),
+			translate,
+			cssClass: "key-axis",
+			ticks: axisConfig.ticks,
+			labels: {
+				maxSize: AxisModel.getLabelSize(
+					labelConfig.maxSize.main,
+					data[dataOptions.dataSource].map((d) => d[dataOptions.keyField.name])
+				).width,
+				position: AxisModel.getKeyAxisLabelPosition(
+					canvasModel,
+					DataManagerModel.getDataValuesByKeyField(data, dataOptions.dataSource, dataOptions.keyField.name)
+						.length,
+					axisConfig
+				),
+				visible: !TwoDimensionalModel.getChartsEmbeddedLabelsFlag(charts, orientation),
+				defaultTooltip: tooltipSettings.position === "fixed",
+				showTick: tickCalculator.createFunctionCalculator(this.getAxisLength(orientation, canvasModel)),
+				linearTickStep: MINIMAL_HORIZONTAL_STEP_SIZE,
+				tickAmountSettings: {
+					policy: { type: "auto" }
+				}
+			},
+			visibility: axisConfig.visibility,
+			line: {
+				visible:
+					(_c = (_b = axisConfig.line) === null || _b === void 0 ? void 0 : _b.visible) !== null &&
+					_c !== void 0
+						? _c
+						: DEFAULT_AXIS_LINE_VISIBLE
+			},
+			browserTooltip: {
+				format: (value) => value
+			}
+		};
+	}
+	static getMainValueAxis(defaultFormatter, orient, position, axisConfig, labelConfig, canvasModel, scaleInfo) {
+		return this.getValueAxis(
+			defaultFormatter,
+			orient,
+			position,
+			"value-axis",
+			axisConfig,
+			labelConfig,
+			canvasModel,
+			scaleInfo
+		);
+	}
+	static getSecondaryValueAxis(
+		defaultFormatter,
+		orient,
+		mainAxisPosition,
+		axisConfig,
+		labelConfig,
+		canvasModel,
+		scaleInfo
+	) {
+		return this.getValueAxis(
+			defaultFormatter,
+			orient,
+			mainAxisPosition === "start" ? "end" : "start",
+			"value-secondary-axis",
+			axisConfig,
+			labelConfig,
+			canvasModel,
+			scaleInfo
+		);
+	}
+	static getValueAxis(defaultFormatter, orient, position, cssClass, axisConfig, labelConfig, canvasModel, scaleInfo) {
+		var _a, _b;
+		return {
+			type: "value",
+			orient: AxisModel.getAxisOrient(AxisType.Value, orient, position),
+			translate: {
+				translateX: AxisModel.getAxisTranslateX(AxisType.Value, orient, position, canvasModel),
+				translateY: AxisModel.getAxisTranslateY(AxisType.Value, orient, position, canvasModel)
+			},
+			cssClass,
+			ticks: axisConfig.ticks,
+			labels: {
+				maxSize: labelConfig.maxSize.main,
+				position: "straight",
+				visible: true,
+				defaultTooltip: true,
+				showTick: showAllTicks,
+				linearTickStep: this.getTickStep(orient, axisConfig),
+				tickAmountSettings: {
+					policy: this.getTickAmountPolicy(orient, axisConfig, scaleInfo)
+				}
+			},
+			visibility: axisConfig.visibility,
+			line: {
+				visible:
+					(_b = (_a = axisConfig.line) === null || _a === void 0 ? void 0 : _a.visible) !== null &&
+					_b !== void 0
+						? _b
+						: DEFAULT_AXIS_LINE_VISIBLE
+			},
+			browserTooltip: {
+				format: (value) => defaultFormatter(value)
+			}
+		};
+	}
+	static getAxisLength(chartOrientation, canvasModel) {
+		if (chartOrientation === "horizontal") {
+			return canvasModel.getChartBlockHeight();
+		} else {
+			return canvasModel.getChartBlockWidth();
+		}
+	}
+	static getAxisOrient(axisType, chartOrientation, axisPosition) {
+		if (chartOrientation === "vertical") {
+			if (axisPosition === "start") return axisType === AxisType.Key ? "top" : "left";
+			return axisType === AxisType.Key ? "bottom" : "right";
+		}
+		if (axisPosition === "start") return axisType === AxisType.Key ? "left" : "top";
+		return axisType === AxisType.Key ? "right" : "bottom";
+	}
+	static getAxisTranslateX(axisType, chartOrientation, axisPosition, canvasModel) {
+		const orient = AxisModel.getAxisOrient(axisType, chartOrientation, axisPosition);
+		if (orient === "top" || orient === "left") return canvasModel.getMarginSide("left");
+		else if (orient === "bottom") return canvasModel.getMarginSide("left");
+		return canvasModel.getBlockSize().width - canvasModel.getMarginSide("right");
+	}
+	static getAxisTranslateY(axisType, chartOrientation, axisPosition, canvasModel) {
+		const orient = AxisModel.getAxisOrient(axisType, chartOrientation, axisPosition);
+		if (orient === "top" || orient === "left") return canvasModel.getMarginSide("top");
+		else if (orient === "bottom") return canvasModel.getBlockSize().height - canvasModel.getMarginSide("bottom");
+		return canvasModel.getMarginSide("top");
+	}
+	static getKeyAxisLabelPosition(canvasModel, scopedDataLength, axisConfig) {
+		var _a;
+		return this.service.getKeyAxisLabelPosition(
+			canvasModel.getChartBlockWidth(),
+			scopedDataLength,
+			(_a = axisConfig === null || axisConfig === void 0 ? void 0 : axisConfig.labels) === null || _a === void 0
+				? void 0
+				: _a.position
+		);
+	}
+	static getLabelSize(labelMaxWidth, labelTexts) {
+		const ONE_UPPER_SYMBOL_WIDTH_PX = 8;
+		const longestLabelLength = labelTexts.length
+			? Math.max(...labelTexts.map((t) => ModelHelper.getStringScore(t)))
+			: 0;
+		const longestLabelWidth = ONE_UPPER_SYMBOL_WIDTH_PX * longestLabelLength;
+		return {
+			height: LABEL_ELEMENT_HEIGHT_PX,
+			width: longestLabelWidth > labelMaxWidth ? labelMaxWidth : longestLabelWidth
+		};
+	}
+	static getRoundValue(value) {
+		const absValue = Math.abs(value);
+		const sign = Math.sign(value);
+		if (absValue < 10) return value;
+		if (absValue < 100) return sign * Math.floor(absValue / 10) * 10;
+		const valueStr = absValue.toString();
+		const firstTwoDigits = Math.floor(absValue / Math.pow(10, valueStr.length - 2));
+		const roundedFirstTwoDigits = firstTwoDigits < 10 ? firstTwoDigits : Math.floor(firstTwoDigits / 5) * 5;
+		const roundedNumber = roundedFirstTwoDigits * Math.pow(10, valueStr.length - 2);
+		return sign * roundedNumber;
+	}
+	static getTickAmountPolicy(orient, axisConfig, scaleInfo) {
+		const axisLength = scaleInfo.range.end - scaleInfo.range.start;
+		const linearTickStep = this.getTickStep(orient, axisConfig);
+		let tickAmountPolicy;
+		if (Math.floor(axisLength / linearTickStep) > 2) {
+			tickAmountPolicy = {
+				type: "amount",
+				amount: Math.floor(axisLength / linearTickStep)
+			};
+		} else {
+			const roundedMaxValue = this.getRoundValue(max(scaleInfo.domain));
+			tickAmountPolicy = {
+				type: "constant",
+				values: [min(scaleInfo.domain), roundedMaxValue]
+			};
+		}
+		return tickAmountPolicy;
+	}
+	static getKeyAxisTranslateModel(chartOrientation, axisPosition, canvasModel, getZeroCoordinate) {
+		let translateY;
+		let translateX;
+		if (chartOrientation === "vertical") {
+			translateY = getZeroCoordinate
+				? getZeroCoordinate() + canvasModel.getMarginSide("top")
+				: AxisModel.getAxisTranslateY(AxisType.Key, chartOrientation, axisPosition, canvasModel);
+			translateX = AxisModel.getAxisTranslateX(AxisType.Key, chartOrientation, axisPosition, canvasModel);
+		} else {
+			translateX = getZeroCoordinate
+				? getZeroCoordinate() + canvasModel.getMarginSide("left")
+				: AxisModel.getAxisTranslateX(AxisType.Key, chartOrientation, axisPosition, canvasModel);
+			translateY = AxisModel.getAxisTranslateY(AxisType.Key, chartOrientation, axisPosition, canvasModel);
+		}
+		return {
+			translateX,
+			translateY
+		};
+	}
+	static getTickStep(orient, axisConfig) {
+		var _a, _b;
+		return (_b = (_a = axisConfig.labels) === null || _a === void 0 ? void 0 : _a.stepSize) !== null &&
+			_b !== void 0
+			? _b
+			: orient === "horizontal"
+			? MINIMAL_HORIZONTAL_STEP_SIZE
+			: MINIMAL_VERTICAL_STEP_SIZE;
+	}
 }
 AxisModel.service = new AxisModelService();

package/lib/model/featuresModel/axisModelService.d.ts

@@ -1,12 +1,16 @@
 import { AxisLabelPosition, MdtChartsDataRow, MdtChartsShowAxisLabelRule, ShowTickFn } from "../../config/config";
 export declare const showAllTicks: ShowTickFn;
 export declare class AxisModelService {
-    getKeyAxisLabelPosition(chartBlockWidth: number, scopedDataLength: number, positionFromConfig?: AxisLabelPosition): AxisLabelPosition;
+	getKeyAxisLabelPosition(
+		chartBlockWidth: number,
+		scopedDataLength: number,
+		positionFromConfig?: AxisLabelPosition
+	): AxisLabelPosition;
 }
 export declare class AxisModelTickCalculator {
-    private readonly dataRows;
-    private readonly rule?;
-    private readonly defaultTickSpace;
-    constructor(dataRows: MdtChartsDataRow[], rule?: MdtChartsShowAxisLabelRule);
-    createFunctionCalculator(axisSize: number): ShowTickFn;
+	private readonly dataRows;
+	private readonly rule?;
+	private readonly defaultTickSpace;
+	constructor(dataRows: MdtChartsDataRow[], rule?: MdtChartsShowAxisLabelRule);
+	createFunctionCalculator(axisSize: number): ShowTickFn;
 }

package/lib/model/featuresModel/axisModelService.js

@@ -1,32 +1,32 @@
 export const showAllTicks = (d) => d;
 export class AxisModelService {
-    getKeyAxisLabelPosition(chartBlockWidth, scopedDataLength, positionFromConfig) {
-        if (positionFromConfig === "rotated" || positionFromConfig === "straight") {
-            return positionFromConfig;
-        }
-        const minBandSize = 50;
-        if (chartBlockWidth / scopedDataLength < minBandSize)
-            return "rotated";
-        return "straight";
-    }
+	getKeyAxisLabelPosition(chartBlockWidth, scopedDataLength, positionFromConfig) {
+		if (positionFromConfig === "rotated" || positionFromConfig === "straight") {
+			return positionFromConfig;
+		}
+		const minBandSize = 50;
+		if (chartBlockWidth / scopedDataLength < minBandSize) return "rotated";
+		return "straight";
+	}
 }
 export class AxisModelTickCalculator {
-    constructor(dataRows, rule) {
-        this.dataRows = dataRows;
-        this.rule = rule;
-        this.defaultTickSpace = 20;
-    }
-    createFunctionCalculator(axisSize) {
-        var _a, _b, _c;
-        if ((_a = this.rule) === null || _a === void 0 ? void 0 : _a.showTickFn)
-            return this.rule.showTickFn;
-        const tickSpace = (_c = (_b = this.rule) === null || _b === void 0 ? void 0 : _b.spaceForOneLabel) !== null && _c !== void 0 ? _c : this.defaultTickSpace;
-        const allowedKeysAmount = Math.floor(axisSize / tickSpace);
-        if (allowedKeysAmount >= this.dataRows.length)
-            return showAllTicks;
-        let divider = Math.ceil(this.dataRows.length / allowedKeysAmount);
-        return (d, i) => {
-            return i % divider === 0 ? d : undefined;
-        };
-    }
+	constructor(dataRows, rule) {
+		this.dataRows = dataRows;
+		this.rule = rule;
+		this.defaultTickSpace = 20;
+	}
+	createFunctionCalculator(axisSize) {
+		var _a, _b, _c;
+		if ((_a = this.rule) === null || _a === void 0 ? void 0 : _a.showTickFn) return this.rule.showTickFn;
+		const tickSpace =
+			(_c = (_b = this.rule) === null || _b === void 0 ? void 0 : _b.spaceForOneLabel) !== null && _c !== void 0
+				? _c
+				: this.defaultTickSpace;
+		const allowedKeysAmount = Math.floor(axisSize / tickSpace);
+		if (allowedKeysAmount >= this.dataRows.length) return showAllTicks;
+		let divider = Math.ceil(this.dataRows.length / allowedKeysAmount);
+		return (d, i) => {
+			return i % divider === 0 ? d : undefined;
+		};
+	}
 }

package/lib/model/featuresModel/legendModel/legendCanvasModel.d.ts

@@ -2,17 +2,22 @@ import { DataLegendParams } from "../../dataManagerModel/dataManagerModel";
 import { LegendPosition } from "../../model";
 export declare type LegendItemsDirection = "row" | "column";
 export interface LegendItemContentOptions {
-    text: string;
-    markerSize: {
-        widthPx: number;
-        heightPx: number;
-        marginRightPx: number;
-    };
-    wrapperSize: {
-        marginRightPx: number;
-    };
+	text: string;
+	markerSize: {
+		widthPx: number;
+		heightPx: number;
+		marginRightPx: number;
+	};
+	wrapperSize: {
+		marginRightPx: number;
+	};
 }
 export declare class LegendCanvasModel {
-    static findElementsAmountByLegendSize(items: LegendItemContentOptions[], position: LegendPosition, legendBlockWidth: number, legendBlockHeight: number): DataLegendParams;
-    private static getLegendWrapperEl;
+	static findElementsAmountByLegendSize(
+		items: LegendItemContentOptions[],
+		position: LegendPosition,
+		legendBlockWidth: number,
+		legendBlockHeight: number
+	): DataLegendParams;
+	private static getLegendWrapperEl;
 }