mdt-charts 1.28.2 → 1.29.0

package/lib/engine/features/legend/legendHelper.js

@@ -2,98 +2,103 @@ import { Helper } from "../../helpers/helper";
 import { Legend } from "./legend";
 import { LegendHelperService } from "./legendHelperService";
 export class LegendHelper {
-    static getLegendItemsContent(options, data) {
-        if (options.type === "2d") {
-            let texts = [];
-            options.charts.forEach((chart) => {
-                texts = texts.concat(chart.data.valueFields.map((field) => (Object.assign(Object.assign({}, chart.legend), { textContent: field.title }))));
-            });
-            return texts;
-        }
-        if (options.type === "polar") {
-            return data[options.data.dataSource].map((record) => (Object.assign(Object.assign({}, options.charts[0].legend), { textContent: record[options.data.keyField.name] })));
-        }
-    }
-    static getMarksColor(options, dataRows) {
-        if (options.type === "2d") {
-            let colors = [];
-            options.charts.forEach((chart) => {
-                colors = colors.concat(chart.style.elementColors);
-            });
-            return colors;
-        }
-        else if (options.type === "polar") {
-            if (!options.charts[0].data.colorField)
-                return options.charts.map((chart) => chart.style.elementColors)[0];
-            return dataRows.map((row) => row[options.charts[0].data.colorField]);
-        }
-    }
-    static getMaxItemWidth(legendBlockWidth, marginsLeft, itemsDirection) {
-        if (itemsDirection === "row") {
-            const sumOfMargins = Helper.getSumOfNumeric(marginsLeft);
-            return (parseFloat(legendBlockWidth) - sumOfMargins) / marginsLeft.length;
-        }
-        return parseFloat(legendBlockWidth);
-    }
-    static getSumOfItemsWidths(itemsWidth, marginsLeft) {
-        let sumOfItemsWidth = Helper.getSumOfNumeric(itemsWidth);
-        sumOfItemsWidth += Helper.getSumOfNumeric(marginsLeft);
-        return sumOfItemsWidth;
-    }
-    static getLegendCoordinateByPosition(legendPosition, legendBlockModel, blockSize) {
-        const legendModel = legendBlockModel.coordinate[legendPosition];
-        const coordinate = {
-            x: 0,
-            y: 0,
-            width: 0,
-            height: 0
-        };
-        if (legendPosition === "left" || legendPosition === "right") {
-            coordinate.y = legendModel.margin.top + legendModel.pad;
-            coordinate.width = legendModel.size;
-            coordinate.height = blockSize.height - legendModel.margin.top - legendModel.margin.bottom;
-        }
-        else if (legendPosition === "bottom" || legendPosition === "top") {
-            coordinate.x = legendModel.margin.left;
-            coordinate.width = blockSize.width - legendModel.margin.left - legendModel.margin.right;
-            coordinate.height = legendModel.size;
-        }
-        if (legendPosition === "left")
-            coordinate.x = legendModel.margin.left;
-        else if (legendPosition === "right")
-            coordinate.x = blockSize.width - legendModel.size - legendModel.margin.right;
-        else if (legendPosition === "top")
-            coordinate.y = legendModel.margin.top + legendModel.pad;
-        else if (legendPosition === "bottom")
-            coordinate.y = blockSize.height - legendModel.size - legendModel.margin.bottom;
-        return coordinate;
-    }
-    static getContentRenderingOptions(chartNotation, legendPosition, legendBlockModel) {
-        const itemsDirection = this.service.getLegendItemsDirection(legendPosition);
-        const legendLabelClass = this.getLegendClassByChartNotation(chartNotation);
-        return {
-            wrapperClasses: [
-                Legend.legendBlockClass,
-                chartNotation === "2d" ? "legend-block-centered" : "",
-                this.service.getWrapperClassByItemsDirection(itemsDirection),
-                this.service.getWrapperClassByWrappingItems(legendPosition, chartNotation)
-            ],
-            shouldCropLabels: chartNotation === "2d",
-            blockModel: legendBlockModel,
-            itemsOptions: {
-                markerClass: Legend.markerClass,
-                labelClass: this.service.getLegendLabelClassByPosition(legendPosition, chartNotation, legendLabelClass),
-                wrapperClasses: [Legend.itemClass, this.service.getItemClasses(itemsDirection)]
-            }
-        };
-    }
-    static getLegendClassByChartNotation(chartNotation) {
-        const legendClasses = {
-            "2d": Legend.label2DClass,
-            polar: Legend.labelPolarClass,
-            interval: Legend.labelIntervalClass
-        };
-        return `${Legend.labelClass} ${legendClasses[chartNotation]}`;
-    }
+	static getLegendItemsContent(options, data) {
+		if (options.type === "2d") {
+			let texts = [];
+			options.charts.forEach((chart) => {
+				texts = texts.concat(
+					chart.data.valueFields.map((field) =>
+						Object.assign(Object.assign({}, chart.legend), {
+							textContent: field.title
+						})
+					)
+				);
+			});
+			return texts;
+		}
+		if (options.type === "polar") {
+			return data[options.data.dataSource].map((record) =>
+				Object.assign(Object.assign({}, options.charts[0].legend), {
+					textContent: record[options.data.keyField.name]
+				})
+			);
+		}
+	}
+	static getMarksColor(options, dataRows) {
+		if (options.type === "2d") {
+			let colors = [];
+			options.charts.forEach((chart) => {
+				colors = colors.concat(chart.style.elementColors);
+			});
+			return colors;
+		} else if (options.type === "polar") {
+			if (!options.charts[0].data.colorField) return options.charts.map((chart) => chart.style.elementColors)[0];
+			return dataRows.map((row) => row[options.charts[0].data.colorField]);
+		}
+	}
+	static getMaxItemWidth(legendBlockWidth, marginsLeft, itemsDirection) {
+		if (itemsDirection === "row") {
+			const sumOfMargins = Helper.getSumOfNumeric(marginsLeft);
+			return (parseFloat(legendBlockWidth) - sumOfMargins) / marginsLeft.length;
+		}
+		return parseFloat(legendBlockWidth);
+	}
+	static getSumOfItemsWidths(itemsWidth, marginsLeft) {
+		let sumOfItemsWidth = Helper.getSumOfNumeric(itemsWidth);
+		sumOfItemsWidth += Helper.getSumOfNumeric(marginsLeft);
+		return sumOfItemsWidth;
+	}
+	static getLegendCoordinateByPosition(legendPosition, legendBlockModel, blockSize) {
+		const legendModel = legendBlockModel.coordinate[legendPosition];
+		const coordinate = {
+			x: 0,
+			y: 0,
+			width: 0,
+			height: 0
+		};
+		if (legendPosition === "left" || legendPosition === "right") {
+			coordinate.y = legendModel.margin.top + legendModel.pad;
+			coordinate.width = legendModel.size;
+			coordinate.height = blockSize.height - legendModel.margin.top - legendModel.margin.bottom;
+		} else if (legendPosition === "bottom" || legendPosition === "top") {
+			coordinate.x = legendModel.margin.left;
+			coordinate.width = blockSize.width - legendModel.margin.left - legendModel.margin.right;
+			coordinate.height = legendModel.size;
+		}
+		if (legendPosition === "left") coordinate.x = legendModel.margin.left;
+		else if (legendPosition === "right")
+			coordinate.x = blockSize.width - legendModel.size - legendModel.margin.right;
+		else if (legendPosition === "top") coordinate.y = legendModel.margin.top + legendModel.pad;
+		else if (legendPosition === "bottom")
+			coordinate.y = blockSize.height - legendModel.size - legendModel.margin.bottom;
+		return coordinate;
+	}
+	static getContentRenderingOptions(chartNotation, legendPosition, legendBlockModel) {
+		const itemsDirection = this.service.getLegendItemsDirection(legendPosition);
+		const legendLabelClass = this.getLegendClassByChartNotation(chartNotation);
+		return {
+			wrapperClasses: [
+				Legend.legendBlockClass,
+				chartNotation === "2d" ? "legend-block-centered" : "",
+				this.service.getWrapperClassByItemsDirection(itemsDirection),
+				this.service.getWrapperClassByWrappingItems(legendPosition, chartNotation)
+			],
+			shouldCropLabels: chartNotation === "2d",
+			blockModel: legendBlockModel,
+			itemsOptions: {
+				markerClass: Legend.markerClass,
+				labelClass: this.service.getLegendLabelClassByPosition(legendPosition, chartNotation, legendLabelClass),
+				wrapperClasses: [Legend.itemClass, this.service.getItemClasses(itemsDirection)]
+			}
+		};
+	}
+	static getLegendClassByChartNotation(chartNotation) {
+		const legendClasses = {
+			"2d": Legend.label2DClass,
+			polar: Legend.labelPolarClass,
+			interval: Legend.labelIntervalClass
+		};
+		return `${Legend.labelClass} ${legendClasses[chartNotation]}`;
+	}
 }
 LegendHelper.service = new LegendHelperService();

package/lib/engine/features/legend/legendHelperService.d.ts

@@ -2,10 +2,17 @@ import { ChartNotation } from "../../../config/config";
 import { LegendItemsDirection } from "../../../model/featuresModel/legendModel/legendCanvasModel";
 import { LegendPosition } from "../../../model/model";
 export declare class LegendHelperService {
-    getWrapperClassByItemsDirection(itemsDirection: LegendItemsDirection): "legend-block-column" | "legend-block-row";
-    getWrapperClassByWrappingItems(legendPosition: LegendPosition, chartNotation: ChartNotation): "legend-wrapper-with-wrap" | "legend-wrapper-without-wrap";
-    getLegendLabelClassByPosition(legendPosition: LegendPosition, chartNotation: ChartNotation, initialLabelClass: string): string;
-    getItemClasses(itemsDirection: LegendItemsDirection): string;
-    getLegendItemsDirection(legendPosition: LegendPosition): LegendItemsDirection;
-    private doesLegendInTopBy2d;
+	getWrapperClassByItemsDirection(itemsDirection: LegendItemsDirection): "legend-block-column" | "legend-block-row";
+	getWrapperClassByWrappingItems(
+		legendPosition: LegendPosition,
+		chartNotation: ChartNotation
+	): "legend-wrapper-with-wrap" | "legend-wrapper-without-wrap";
+	getLegendLabelClassByPosition(
+		legendPosition: LegendPosition,
+		chartNotation: ChartNotation,
+		initialLabelClass: string
+	): string;
+	getItemClasses(itemsDirection: LegendItemsDirection): string;
+	getLegendItemsDirection(legendPosition: LegendPosition): LegendItemsDirection;
+	private doesLegendInTopBy2d;
 }

package/lib/engine/features/legend/legendHelperService.js

@@ -1,27 +1,26 @@
 export class LegendHelperService {
-    getWrapperClassByItemsDirection(itemsDirection) {
-        return itemsDirection === "column" ? "legend-block-column" : "legend-block-row";
-    }
-    getWrapperClassByWrappingItems(legendPosition, chartNotation) {
-        if (this.doesLegendInTopBy2d(legendPosition, chartNotation)) {
-            return "legend-wrapper-without-wrap";
-        }
-        return "legend-wrapper-with-wrap";
-    }
-    getLegendLabelClassByPosition(legendPosition, chartNotation, initialLabelClass) {
-        if (this.doesLegendInTopBy2d(legendPosition, chartNotation))
-            return `${initialLabelClass} ${initialLabelClass + "-nowrap"}`;
-        return initialLabelClass;
-    }
-    getItemClasses(itemsDirection) {
-        return itemsDirection === "column" ? "legend-item-row" : "legend-item-inline";
-    }
-    getLegendItemsDirection(legendPosition) {
-        if (legendPosition === "right" || legendPosition === "left")
-            return "column";
-        return "row";
-    }
-    doesLegendInTopBy2d(legendPosition, chartNotation) {
-        return (legendPosition === "top" || legendPosition === "bottom") && chartNotation === "2d";
-    }
+	getWrapperClassByItemsDirection(itemsDirection) {
+		return itemsDirection === "column" ? "legend-block-column" : "legend-block-row";
+	}
+	getWrapperClassByWrappingItems(legendPosition, chartNotation) {
+		if (this.doesLegendInTopBy2d(legendPosition, chartNotation)) {
+			return "legend-wrapper-without-wrap";
+		}
+		return "legend-wrapper-with-wrap";
+	}
+	getLegendLabelClassByPosition(legendPosition, chartNotation, initialLabelClass) {
+		if (this.doesLegendInTopBy2d(legendPosition, chartNotation))
+			return `${initialLabelClass} ${initialLabelClass + "-nowrap"}`;
+		return initialLabelClass;
+	}
+	getItemClasses(itemsDirection) {
+		return itemsDirection === "column" ? "legend-item-row" : "legend-item-inline";
+	}
+	getLegendItemsDirection(legendPosition) {
+		if (legendPosition === "right" || legendPosition === "left") return "column";
+		return "row";
+	}
+	doesLegendInTopBy2d(legendPosition, chartNotation) {
+		return (legendPosition === "top" || legendPosition === "bottom") && chartNotation === "2d";
+	}
 }

package/lib/engine/features/legend/legendMarkerCreator.d.ts

@@ -1,21 +1,30 @@
 import { BaseType, Selection } from "d3-selection";
 import { ChartLegendModel } from "../../../model/model";
 interface MarkerCreationOptions extends ChartLegendModel {
-    color: string;
+	color: string;
 }
 declare type MarkerParentSelection = Selection<BaseType, any, BaseType, any>;
 export declare class LegendMarkerCreator {
-    create(selection: MarkerParentSelection, options: MarkerCreationOptions): Selection<BaseType, ChartLegendModel, BaseType, unknown>;
-    updateColorForItem(selection: MarkerParentSelection, options: MarkerCreationOptions): void;
+	create(
+		selection: MarkerParentSelection,
+		options: MarkerCreationOptions
+	): Selection<BaseType, ChartLegendModel, BaseType, unknown>;
+	updateColorForItem(selection: MarkerParentSelection, options: MarkerCreationOptions): void;
 }
 export interface MarkerCreator {
-    renderMarker(selection: MarkerParentSelection, color: string): Selection<BaseType, ChartLegendModel, BaseType, unknown>;
-    updateColors(selection: MarkerParentSelection, color: string): void;
+	renderMarker(
+		selection: MarkerParentSelection,
+		color: string
+	): Selection<BaseType, ChartLegendModel, BaseType, unknown>;
+	updateColors(selection: MarkerParentSelection, color: string): void;
 }
 interface MakerCreatorCustomOptions {
-    default?: {
-        cssClass: string;
-    };
+	default?: {
+		cssClass: string;
+	};
 }
-export declare function getMarkerCreator(options: ChartLegendModel, customOptions?: MakerCreatorCustomOptions): MarkerCreator;
+export declare function getMarkerCreator(
+	options: ChartLegendModel,
+	customOptions?: MakerCreatorCustomOptions
+): MarkerCreator;
 export {};

package/lib/engine/features/legend/legendMarkerCreator.js

@@ -3,90 +3,93 @@ import { HatchPatternDef } from "../../block/defs/hatchPattern";
 import { applyLineDash } from "../../twoDimensionalNotation/line/lineHelper";
 import { getClipPathValue } from "../../../engine/twoDimensionalNotation/bar/barHelper";
 export class LegendMarkerCreator {
-    create(selection, options) {
-        const creator = getMarkerCreator(options);
-        return creator.renderMarker(selection, options.color);
-    }
-    updateColorForItem(selection, options) {
-        const creator = getMarkerCreator(options);
-        creator.updateColors(selection, options.color);
-    }
+	create(selection, options) {
+		const creator = getMarkerCreator(options);
+		return creator.renderMarker(selection, options.color);
+	}
+	updateColorForItem(selection, options) {
+		const creator = getMarkerCreator(options);
+		creator.updateColors(selection, options.color);
+	}
 }
 export function getMarkerCreator(options, customOptions) {
-    var _a;
-    if (options.markerShape === "bar")
-        return new BarMarkerCreator(options.barViewOptions);
-    if (options.markerShape === "line")
-        return new LineMarkerCreator(options.lineViewOptions);
-    return new DefaultMarkerCreator((_a = customOptions === null || customOptions === void 0 ? void 0 : customOptions.default) === null || _a === void 0 ? void 0 : _a.cssClass);
+	var _a;
+	if (options.markerShape === "bar") return new BarMarkerCreator(options.barViewOptions);
+	if (options.markerShape === "line") return new LineMarkerCreator(options.lineViewOptions);
+	return new DefaultMarkerCreator(
+		(_a = customOptions === null || customOptions === void 0 ? void 0 : customOptions.default) === null ||
+		_a === void 0
+			? void 0
+			: _a.cssClass
+	);
 }
 class DefaultMarkerCreator {
-    constructor(cssClass = Legend.markerCircle) {
-        this.cssClass = cssClass;
-    }
-    renderMarker(selection, color) {
-        return selection.append("span").style("background-color", color).classed(this.cssClass, true);
-    }
-    updateColors(selection, color) {
-        selection.select(`.${this.cssClass}`).style("background-color", color);
-    }
+	constructor(cssClass = Legend.markerCircle) {
+		this.cssClass = cssClass;
+	}
+	renderMarker(selection, color) {
+		return selection.append("span").style("background-color", color).classed(this.cssClass, true);
+	}
+	updateColors(selection, color) {
+		selection.select(`.${this.cssClass}`).style("background-color", color);
+	}
 }
 class SvgMarkerCreator {
-    renderSvg(selection) {
-        return selection
-            .append("svg")
-            .style("display", "inline-block")
-            .style("height", "8px")
-            .classed(Legend.markerClass, true);
-    }
+	renderSvg(selection) {
+		return selection
+			.append("svg")
+			.style("display", "inline-block")
+			.style("height", "8px")
+			.classed(Legend.markerClass, true);
+	}
 }
 class BarMarkerCreator extends SvgMarkerCreator {
-    constructor(options) {
-        super();
-        this.options = options;
-    }
-    renderMarker(selection, color) {
-        const svg = this.renderSvg(selection).style("width", this.options.width);
-        const bars = svg
-            .append("rect")
-            .attr("x", 0)
-            .attr("y", 0)
-            .attr("height", this.options.width)
-            .attr("width", this.options.width)
-            .style("fill", color)
-            .style("clip-path", getClipPathValue(this.options.borderRadius));
-        if (this.options.hatch.on) {
-            bars.style("mask", HatchPatternDef.getMaskValue());
-        }
-        return bars;
-    }
-    updateColors(selection, color) {
-        selection.select("svg rect").style("fill", color);
-    }
+	constructor(options) {
+		super();
+		this.options = options;
+	}
+	renderMarker(selection, color) {
+		const svg = this.renderSvg(selection).style("width", this.options.width);
+		const bars = svg
+			.append("rect")
+			.attr("x", 0)
+			.attr("y", 0)
+			.attr("height", this.options.width)
+			.attr("width", this.options.width)
+			.style("fill", color)
+			.style("clip-path", getClipPathValue(this.options.borderRadius));
+		if (this.options.hatch.on) {
+			bars.style("mask", HatchPatternDef.getMaskValue());
+		}
+		return bars;
+	}
+	updateColors(selection, color) {
+		selection.select("svg rect").style("fill", color);
+	}
 }
 class LineMarkerCreator extends SvgMarkerCreator {
-    constructor(options) {
-        super();
-        this.options = options;
-    }
-    renderMarker(selection, color) {
-        const svg = this.renderSvg(selection).style("width", this.options.length);
-        const line = svg
-            .append("line")
-            .style("stroke", "red")
-            .classed("line", true)
-            .attr("x1", 0)
-            .attr("x2", this.options.length)
-            .attr("y1", 5)
-            .attr("y2", 5)
-            .style("stroke", color)
-            .style("stroke-width", this.options.strokeWidth);
-        if (this.options.dashedStyles.on) {
-            applyLineDash(line, this.options.dashedStyles.dashSize, this.options.dashedStyles.gapSize);
-        }
-        return line;
-    }
-    updateColors(selection, color) {
-        selection.select("svg line").style("stroke", color);
-    }
+	constructor(options) {
+		super();
+		this.options = options;
+	}
+	renderMarker(selection, color) {
+		const svg = this.renderSvg(selection).style("width", this.options.length);
+		const line = svg
+			.append("line")
+			.style("stroke", "red")
+			.classed("line", true)
+			.attr("x1", 0)
+			.attr("x2", this.options.length)
+			.attr("y1", 5)
+			.attr("y2", 5)
+			.style("stroke", color)
+			.style("stroke-width", this.options.strokeWidth);
+		if (this.options.dashedStyles.on) {
+			applyLineDash(line, this.options.dashedStyles.dashSize, this.options.dashedStyles.gapSize);
+		}
+		return line;
+	}
+	updateColors(selection, color) {
+		selection.select("svg line").style("stroke", color);
+	}
 }

package/lib/engine/features/legend/legendWidthCalculator.d.ts

@@ -1,16 +1,16 @@
 declare type SizePx = number;
 interface WidthCalculatorConfig {
-    wrapper: LegendWrapperConfig;
-    items: LegendItemConfig[];
+	wrapper: LegendWrapperConfig;
+	items: LegendItemConfig[];
 }
 export declare function getNewLegendItemWidths(config: WidthCalculatorConfig): SizePx[];
 interface LegendWrapperConfig {
-    maxRowsAmount: number;
-    width: SizePx;
+	maxRowsAmount: number;
+	width: SizePx;
 }
 export interface LegendItemConfig {
-    marginLeft: SizePx;
-    marginRight: SizePx;
-    width: SizePx;
+	marginLeft: SizePx;
+	marginRight: SizePx;
+	width: SizePx;
 }
 export {};