mdt-charts 1.14.0 → 1.15.0

package/lib/designer/designerConfig.d.ts

@@ -20,6 +20,7 @@ interface Canvas {
     chartBlockMargin: BlockMargin;
     legendBlock: LegendBlockCanvas;
     chartOptions: ChartOptionsCanvas;
+    markers?: MarkerCanvas;
 }
 export interface AxisLabelCanvas {
     maxSize: AxisLabelSize;
@@ -33,6 +34,15 @@ interface BlockMargin {
     left: number;
     right: number;
 }
+interface MarkerCanvas {
+    highlighted?: {
+        radius?: number;
+    };
+    normal?: {
+        radius?: number;
+        borderSize?: number;
+    };
+}
 export interface LegendBlockCanvas {
     maxWidth: number | string;
     static?: StaticLegendBlockCanvas;

package/lib/engine/elementHighlighter/elementHighlighter.d.ts

@@ -2,7 +2,7 @@ import { Selection, BaseType } from 'd3-selection';
 import { PieArcDatum } from 'd3-shape';
 import { BlockMargin, TwoDimensionalChartModel } from "../../model/model";
 import { Block } from "../block/block";
-import { MdtChartsDataRow, Size, TwoDimensionalChartType } from '../../config/config';
+import { MdtChartsDataRow, Size } from '../../config/config';
 export declare class ElementHighlighter {
     private static inactiveElemClass;
     static toggleActivityStyle(elementSelection: Selection<BaseType, unknown, BaseType, unknown>, isActive: boolean): void;
@@ -21,7 +21,7 @@ export declare class ElementHighlighter {
     static toggleMarkDotVisible(markDots: Selection<BaseType, any, BaseType, any>, isHighlight: boolean): void;
     static remove2DChartsFullHighlighting(block: Block, charts: TwoDimensionalChartModel[], transitionDuration?: number): void;
     static removeUnselected2DHighlight(block: Block, keyFieldName: string, charts: TwoDimensionalChartModel[], transitionDuration: number): void;
-    static toggle2DElements(elemSelection: Selection<BaseType, any, BaseType, any>, isHighlight: boolean, chartType: TwoDimensionalChartType, transitionDuration: number): void;
+    static toggle2DElements(elemSelection: Selection<BaseType, any, BaseType, any>, isHighlight: boolean, chart: TwoDimensionalChartModel, transitionDuration: number): void;
     private static makeArcClone;
     private static makeArcShadow;
     private static renderDonutSegmentClone;

package/lib/engine/elementHighlighter/elementHighlighter.js

@@ -94,7 +94,7 @@ export class ElementHighlighter {
             const elems = DomHelper.get2DChartElements(block, chart);
             if (chart.type !== 'bar' && !chart.markersOptions.show)
                 elems.classed(MarkDot.hiddenDotClass, true);
-            this.toggle2DElements(elems, false, chart.type, transitionDuration);
+            this.toggle2DElements(elems, false, chart, transitionDuration);
             this.toggleActivityStyle(elems, true);
         });
     }
@@ -104,14 +104,14 @@ export class ElementHighlighter {
             const selectedElems = DomHelper.getChartElementsByKeys(elems, chart.isSegmented, keyFieldName, block.filterEventManager.getSelectedKeys(), SelectionCondition.Exclude);
             if (chart.type !== 'bar' && !chart.markersOptions.show)
                 selectedElems.classed(MarkDot.hiddenDotClass, true);
-            this.toggle2DElements(selectedElems, false, chart.type, transitionDuration);
+            this.toggle2DElements(selectedElems, false, chart, transitionDuration);
             if (block.filterEventManager.getSelectedKeys().length > 0)
                 this.toggleActivityStyle(selectedElems, false);
         });
     }
-    static toggle2DElements(elemSelection, isHighlight, chartType, transitionDuration) {
-        if (chartType === 'area' || chartType === 'line') {
-            elemSelection.call(this.toggleDot, isHighlight, transitionDuration);
+    static toggle2DElements(elemSelection, isHighlight, chart, transitionDuration) {
+        if (chart.type === 'area' || chart.type === 'line') {
+            elemSelection.call(this.toggleDot, isHighlight, chart.markersOptions.styles, transitionDuration);
         }
         else {
             this.toggleBar(elemSelection, isHighlight);
@@ -175,7 +175,7 @@ export class ElementHighlighter {
             });
         }
     }
-    static toggleDot(elementSelection, isScaled, transitionDuration = 0) {
+    static toggleDot(elementSelection, isScaled, styles, transitionDuration = 0) {
         const animationName = 'size-scale';
         elementSelection.nodes().forEach(node => {
             interrupt(node, animationName);
@@ -189,8 +189,8 @@ export class ElementHighlighter {
                 .ease(easeLinear);
         }
         elementsHandler
-            .attr('r', isScaled ? 5 : 4)
-            .style('stroke-width', (isScaled ? 3.5 : 3) + 'px')
+            .attr('r', isScaled ? styles.highlighted.size.radius : styles.normal.size.radius)
+            .style('stroke-width', isScaled ? styles.highlighted.size.borderSize : styles.normal.size.borderSize)
             .each(function () {
             select(this).style('fill', isScaled ? select(this).style('stroke') : 'white');
         });

package/lib/engine/elementHighlighter/selectHighlighter.js

@@ -10,7 +10,7 @@ export class SelectHighlighter {
             const selectedElements = DomHelper.getChartElementsByKeys(DomHelper.get2DChartElements(block, chart), chart.isSegmented, options.data.keyField.name, [keyValue]);
             const elements = DomHelper.get2DChartElements(block, chart);
             if (!appendKey) {
-                ElementHighlighter.toggle2DElements(selectedElements, false, chart.type, block.transitionManager.durations.markerHover);
+                ElementHighlighter.toggle2DElements(selectedElements, false, chart, block.transitionManager.durations.markerHover);
                 if (chart.type !== 'bar' && !chart.markersOptions.show)
                     ElementHighlighter.toggleMarkDotVisible(selectedElements, false);
                 if (selectedKeys.length > 0) {
@@ -24,17 +24,17 @@ export class SelectHighlighter {
                 return;
             }
             if (multySelection) {
-                ElementHighlighter.toggle2DElements(selectedElements, true, chart.type, block.transitionManager.durations.markerHover);
+                ElementHighlighter.toggle2DElements(selectedElements, true, chart, block.transitionManager.durations.markerHover);
                 ElementHighlighter.toggleActivityStyle(selectedElements, true);
                 ElementHighlighter.toggleActivityStyle(DomHelper.getChartElementsByKeys(elements, chart.isSegmented, options.data.keyField.name, selectedKeys, SelectionCondition.Exclude), false);
             }
             else {
-                ElementHighlighter.toggle2DElements(DomHelper.getChartElementsByKeys(elements, chart.isSegmented, options.data.keyField.name, selectedKeys, SelectionCondition.Exclude), false, chart.type, block.transitionManager.durations.markerHover);
+                ElementHighlighter.toggle2DElements(DomHelper.getChartElementsByKeys(elements, chart.isSegmented, options.data.keyField.name, selectedKeys, SelectionCondition.Exclude), false, chart, block.transitionManager.durations.markerHover);
                 ElementHighlighter.toggleActivityStyle(elements, false);
                 if (chart.type !== 'bar' && !chart.markersOptions.show)
                     ElementHighlighter.toggleMarkDotVisible(elements, false);
                 ElementHighlighter.toggleActivityStyle(selectedElements, true);
-                ElementHighlighter.toggle2DElements(selectedElements, true, chart.type, block.transitionManager.durations.markerHover);
+                ElementHighlighter.toggle2DElements(selectedElements, true, chart, block.transitionManager.durations.markerHover);
             }
             if (chart.type !== 'bar' && !chart.markersOptions.show)
                 ElementHighlighter.toggleMarkDotVisible(selectedElements, true);
@@ -76,7 +76,7 @@ export class SelectHighlighter {
     static clear2D(block, options) {
         options.charts.forEach(chart => {
             const elements = DomHelper.get2DChartElements(block, chart);
-            ElementHighlighter.toggle2DElements(elements, false, chart.type, block.transitionManager.durations.markerHover);
+            ElementHighlighter.toggle2DElements(elements, false, chart, block.transitionManager.durations.markerHover);
             ElementHighlighter.toggleActivityStyle(elements, true);
             if (chart.type !== 'bar' && !chart.markersOptions.show)
                 ElementHighlighter.toggleMarkDotVisible(elements, false);

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

@@ -90,7 +90,7 @@ export class Legend {
             .attr('class', options.itemsOptions.labelClass)
             .text(d => d.textContent);
         if (options.shouldCropLabels)
-            LegendDomHelper.cropRowLabels(foreignObject, itemWrappers);
+            LegendDomHelper.decreaseRowLabels(foreignObject, itemWrappers, options.blockModel.static);
         return itemWrappers;
     }
     getObject(block) {

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

@@ -13,7 +13,9 @@ function getNewWidths(collection, wrapper) {
     let avgExtra = extra / biggerThanAvg.length;
     biggerThanAvg.forEach((item, index) => {
         const avgDiff = item.getCurrentWidth() - avgWidth;
-        const decreaseBy = avgDiff < avgExtra ? avgDiff : avgExtra;
+        const decreaseBy = index === biggerThanAvg.length - 1
+            ? extra
+            : (avgDiff < avgExtra ? avgDiff : avgExtra);
         item.decreaseBy(decreaseBy);
         extra -= decreaseBy;
         avgExtra = extra / (biggerThanAvg.length - index - 1);
@@ -25,7 +27,7 @@ function fixWidthsByLinePos(collection, wrapper) {
     let currentRow = [];
     collection.items.forEach((item, i) => {
         const currentRowSum = currentRow.reduce((acc, i) => acc + i.getCurrentTotalWidth(), 0);
-        if (currentRowSum + item.getWidthWithoutRightMargin() <= wrapper.getWidthOfOneLine()) {
+        if (currentRowSum + item.getCurrentTotalWidth() <= wrapper.getWidthOfOneLine()) {
             currentRow.push(item);
         }
         else {
@@ -43,11 +45,13 @@ function fixWidthsByLinePos(collection, wrapper) {
         const bottom = byRows[i + 1];
         const topFreeSpace = wrapper.getWidthOfOneLine() - top.getTotalWidth();
         const firstOfBottom = bottom.getFirstItem();
-        if (topFreeSpace / firstOfBottom.getCurrentTotalWidth() > 0.51 || i === byRows.length - 2) {
+        if (i === byRows.length - 2)
+            top.pushMany(bottom.shiftAll());
+        else if (topFreeSpace / firstOfBottom.getCurrentTotalWidth() > 0.5) {
             const fromBottom = bottom.shift();
             top.push(fromBottom);
-            result.push(...getNewWidths(top, new LegendWrapper({ maxRowsAmount: 1, width: wrapper.getWidthOfOneLine() })));
         }
+        result.push(...getNewWidths(top, new LegendWrapper({ maxRowsAmount: 1, width: wrapper.getWidthOfOneLine() })));
     }
     return result;
 }
@@ -80,11 +84,14 @@ class LegendItem {
         this.width -= by;
     }
     getCurrentWidth() {
-        return this.width;
+        return Math.round(this.width * 100) / 100;
     }
     getTotalMarginSize() {
         return this.config.marginLeft + this.config.marginRight;
     }
+    resetWidthToOriginal() {
+        this.width = this.config.width;
+    }
 }
 class LegendItemCollection {
     constructor(items) {
@@ -113,7 +120,17 @@ class LegendItemCollection {
     shift() {
         return this.items.shift();
     }
+    shiftAll() {
+        return this.items.splice(0, this.items.length);
+    }
     push(item) {
         this.items.push(item);
     }
+    pushMany(items) {
+        this.items.push(...items);
+    }
+    resetItemsToOriginalWidth() {
+        this.items.forEach(item => item.resetWidthToOriginal());
+        return this;
+    }
 }

package/lib/engine/features/markDots/markDot.d.ts

@@ -10,7 +10,6 @@ export interface DotAttrs {
 export declare class MarkDot {
     static readonly markerDotClass: string;
     static readonly hiddenDotClass: string;
-    private static dotRadius;
     static render(block: Block, data: MdtChartsDataRow[], keyAxisOrient: Orient, scales: Scales, margin: BlockMargin, keyFieldName: string, vfIndex: number, valueFieldName: string, chart: TwoDimensionalChartModel): void;
     static update(block: Block, newData: MdtChartsDataRow[], keyAxisOrient: Orient, scales: Scales, margin: BlockMargin, keyField: string, vfIndex: number, valueFieldName: string, chart: TwoDimensionalChartModel): void;
     static updateColors(block: Block, chart: TwoDimensionalChartModel, valueFieldIndex: number): void;

package/lib/engine/features/markDots/markDot.js

@@ -13,7 +13,7 @@ export class MarkDot {
             .enter();
         const attrs = MarkDotHelper.getDotAttrs(keyAxisOrient, scales, margin, keyFieldName, valueFieldName, chart.isSegmented);
         const dots = dotsWrapper.append('circle');
-        this.setAttrs(block, dots, attrs);
+        this.setAttrs(block, dots, attrs, chart.markersOptions.styles);
         this.setClassesAndStyle(dots, chart.cssClasses, vfIndex, chart.style.elementColors);
         if (!chart.markersOptions.show)
             dots.classed(this.hiddenDotClass, true);
@@ -27,7 +27,7 @@ export class MarkDot {
         const newDots = dots
             .enter()
             .append('circle');
-        this.setAttrs(block, newDots, attrs);
+        this.setAttrs(block, newDots, attrs, chart.markersOptions.styles);
         this.setClassesAndStyle(newDots, chart.cssClasses, vfIndex, chart.style.elementColors);
         if (!chart.markersOptions.show)
             newDots.classed(this.hiddenDotClass, true);
@@ -52,17 +52,16 @@ export class MarkDot {
         DomHelper.setCssClasses(dots, Helper.getCssClassesWithElementIndex(cssClasses, vfIndex));
         DomHelper.setChartElementColor(dots, elementColors, vfIndex, 'stroke');
     }
-    static setAttrs(block, dots, attrs) {
+    static setAttrs(block, dots, attrs, styles) {
         dots
             .attr('class', this.markerDotClass)
             .attr('cx', d => attrs.cx(d))
             .attr('cy', d => attrs.cy(d))
-            .attr('r', this.dotRadius)
-            .style('stroke-width', '3px')
+            .attr('r', styles.normal.size.radius)
+            .style('stroke-width', styles.normal.size.borderSize)
             .style('fill', 'white')
             .style('clip-path', `url(#${block.svg.getClipPathId()})`);
     }
 }
 MarkDot.markerDotClass = NamesHelper.getClassName('dot');
 MarkDot.hiddenDotClass = NamesHelper.getClassName('dot-hidden');
-MarkDot.dotRadius = 4;

package/lib/engine/features/tolltip/tooltip.js

@@ -100,7 +100,7 @@ export class Tooltip {
                             const oldElements = DomHelper.getChartElementsByKeys(elements, chart.isSegmented, args.dataOptions.keyField.name, [currentKey]);
                             if (chart.type !== 'bar' && !chart.markersOptions.show)
                                 ElementHighlighter.toggleMarkDotVisible(oldElements, false);
-                            ElementHighlighter.toggle2DElements(oldElements, false, chart.type, block.transitionManager.durations.markerHover);
+                            ElementHighlighter.toggle2DElements(oldElements, false, chart, block.transitionManager.durations.markerHover);
                             if (block.filterEventManager.getSelectedKeys().length > 0) {
                                 ElementHighlighter.toggleActivityStyle(oldElements, false);
                             }
@@ -110,7 +110,7 @@ export class Tooltip {
                             ElementHighlighter.toggleMarkDotVisible(selectedElements, true);
                         ElementHighlighter.toggleActivityStyle(selectedElements, true);
                         if (block.filterEventManager.getSelectedKeys().length === 0 || block.filterEventManager.isSelected(keyValue)) {
-                            ElementHighlighter.toggle2DElements(selectedElements, true, chart.type, block.transitionManager.durations.markerHover);
+                            ElementHighlighter.toggle2DElements(selectedElements, true, chart, block.transitionManager.durations.markerHover);
                         }
                     });
                 }

package/lib/model/dataManagerModel/dataManagerModel.js

@@ -5,6 +5,7 @@ import { MIN_DONUT_BLOCK_SIZE, PolarModel } from "../notations/polar/polarModel"
 import { DataManagerModelService } from "./dataManagerModelService";
 import { LegendPolarMarginCalculator } from "../featuresModel/legendModel/polarMarginCalculator";
 import { CardsDataManagerModel } from "./notations/cardsDataManagerModel";
+import { styledElementValues } from "../modelBuilder";
 export class DataManagerModel {
     static getPreparedData(data, allowableKeys, config) {
         const scopedData = config.options.type !== "card" ? this.getScopedData(data, allowableKeys, config.options.data) : data;
@@ -83,11 +84,16 @@ export class DataManagerModel {
     }
     //TODO: position type
     static getLegendDataParams(position, keys, legendCanvas, canvasModel, legendBlock) {
+        const legendItemContentOptions = keys.map(k => ({
+            text: k,
+            markerSize: styledElementValues.defaultLegendMarkerSizes,
+            wrapperSize: { marginRightPx: styledElementValues.legend.inlineDynamicItemWrapperMarginRightPx }
+        }));
         if (position === 'right') {
-            return LegendCanvasModel.findElementsAmountByLegendSize(keys, position, this.polarMarginCalculator.getMaxLegendWidth(legendCanvas, canvasModel.getBlockSize().width), canvasModel.getChartBlockHeight() - legendBlock.coordinate.bottom.margin.bottom);
+            return LegendCanvasModel.findElementsAmountByLegendSize(legendItemContentOptions, position, this.polarMarginCalculator.getMaxLegendWidth(legendCanvas, canvasModel.getBlockSize().width), canvasModel.getChartBlockHeight() - legendBlock.coordinate.bottom.margin.bottom);
         }
         else {
-            return LegendCanvasModel.findElementsAmountByLegendSize(keys, position, canvasModel.getChartBlockWidth() - legendBlock.coordinate.bottom.margin.left - legendBlock.coordinate.bottom.margin.right, canvasModel.getChartBlockHeight() - legendBlock.coordinate.bottom.margin.bottom - legendBlock.coordinate.bottom.margin.top - MIN_DONUT_BLOCK_SIZE);
+            return LegendCanvasModel.findElementsAmountByLegendSize(legendItemContentOptions, position, canvasModel.getChartBlockWidth() - legendBlock.coordinate.bottom.margin.left - legendBlock.coordinate.bottom.margin.right, canvasModel.getChartBlockHeight() - legendBlock.coordinate.bottom.margin.bottom - legendBlock.coordinate.bottom.margin.top - MIN_DONUT_BLOCK_SIZE);
         }
     }
     static getMaximumPossibleScope(keys, dataModel) {

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

@@ -1,8 +1,19 @@
 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;
+    };
+}
 export declare class LegendCanvasModel {
     static getLegendItemWidth(text: string): number;
-    static findElementsAmountByLegendSize(texts: string[], position: LegendPosition, legendBlockWidth: number, legendBlockHeight: number): DataLegendParams;
+    static findElementsAmountByLegendSize(items: LegendItemContentOptions[], position: LegendPosition, legendBlockWidth: number, legendBlockHeight: number): DataLegendParams;
     private static getLegendWrapperEl;
 }

package/lib/model/featuresModel/legendModel/legendCanvasModel.js

@@ -18,31 +18,37 @@ export class LegendCanvasModel {
         itemWrapper.remove();
         return sumWidth;
     }
-    static findElementsAmountByLegendSize(texts, position, legendBlockWidth, legendBlockHeight) {
+    //TODO: find better solution
+    static findElementsAmountByLegendSize(items, position, legendBlockWidth, legendBlockHeight) {
         const legendWrapper = this.getLegendWrapperEl(legendBlockWidth, position === "right" ? "column" : "row");
         document.body.append(legendWrapper);
         let amount = 0;
-        for (let i = 0; i < texts.length; i++) {
+        for (let i = 0; i < items.length; i++) {
             const itemWrapper = document.createElement('div');
             const colorBlock = document.createElement('span');
             const textBlock = document.createElement('span');
             itemWrapper.classList.add("legend-item");
-            if (position === 'bottom') {
+            if (position === 'bottom' || position === 'top') {
                 itemWrapper.classList.add('legend-item-inline');
                 textBlock.classList.add('legend-label-nowrap');
             }
             else {
                 itemWrapper.classList.add('legend-item-row');
             }
-            colorBlock.classList.add(CLASSES.legendColor);
+            // colorBlock.classList.add(CLASSES.legendColor);
+            colorBlock.style.display = "inline-block";
+            colorBlock.style.width = `${items[i].markerSize.widthPx}px`;
+            colorBlock.style.height = `${items[i].markerSize.heightPx}px`;
+            colorBlock.style.marginRight = `${items[i].markerSize.marginRightPx}px`;
             textBlock.classList.add(CLASSES.legendLabel);
-            textBlock.textContent = texts[i];
+            textBlock.textContent = items[i].text;
+            itemWrapper.style.marginRight = `${items[i].wrapperSize.marginRightPx}px`;
             itemWrapper.append(colorBlock, textBlock);
             legendWrapper.append(itemWrapper);
             amount++;
             if (legendWrapper.offsetHeight > legendBlockHeight) {
                 itemWrapper.remove();
-                if (legendBlockHeight - legendWrapper.offsetHeight >= 15 && position !== 'bottom')
+                if (legendBlockHeight - legendWrapper.offsetHeight >= 15 && position !== 'bottom' && position !== 'top')
                     amount = amount; //TODO: remove
                 else
                     amount -= 1;

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

@@ -1,8 +1,11 @@
 import { Legend } from "../../../config/config";
 import { LegendBlockModel } from "../../model";
+import { TwoDimConfigReader } from "../../modelInstance/configReader";
 import { ModelInstance } from "../../modelInstance/modelInstance";
 export declare class TwoDimLegendModel {
+    private configReader;
+    constructor(configReader: TwoDimConfigReader);
     recalcMarginWith2DLegend(modelInstance: ModelInstance, legendBlockModel: LegendBlockModel, legendOptions: Legend): void;
-    private getLegendSize;
+    private getLegendSizeLegacy;
     private getLegendModel;
 }

package/lib/model/featuresModel/legendModel/twoDimLegendModel.js

@@ -1,18 +1,29 @@
+import { styledElementValues } from "../../modelBuilder";
+import { getWidthOfLegendMarkerByType } from "../../notations/twoDimensional/styles";
+import { LegendCanvasModel } from "./legendCanvasModel";
 import { LegendModel } from "./legendModel";
 export class TwoDimLegendModel {
+    constructor(configReader) {
+        this.configReader = configReader;
+    }
     recalcMarginWith2DLegend(modelInstance, legendBlockModel, legendOptions) {
         const canvasModel = modelInstance.canvasModel;
         const legendPosition = this.getLegendModel(legendOptions).position;
         modelInstance.canvasModel.legendCanvas.setPosition(legendPosition);
         if (legendPosition !== 'off') {
-            const legendSize = this.getLegendSize();
+            const legendItemInfo = this.configReader.getLegendItemInfo();
+            const legendSize = LegendCanvasModel.findElementsAmountByLegendSize(legendItemInfo.map(i => ({
+                text: i.text,
+                markerSize: Object.assign(Object.assign({}, styledElementValues.defaultLegendMarkerSizes), { widthPx: getWidthOfLegendMarkerByType(i.chartType) }),
+                wrapperSize: { marginRightPx: styledElementValues.legend.inlineItemWrapperMarginRightPx }
+            })), 'top', modelInstance.canvasModel.getBlockSize().width, legendBlockModel.static.maxLinesAmount * styledElementValues.legend.inlineLegendOneLineHeightPx).size.height;
             canvasModel.increaseMarginSide(legendPosition, legendSize);
             if (legendSize !== 0)
                 LegendModel.appendToGlobalMarginValuesLegendMargin(canvasModel, legendPosition, legendBlockModel);
             legendBlockModel.coordinate[legendPosition].size = legendSize;
         }
     }
-    getLegendSize() {
+    getLegendSizeLegacy() {
         const heightOfLegendItemWithoutWordWrapping = 20;
         return heightOfLegendItemWithoutWordWrapping;
     }

package/lib/model/margin/twoDim/twoDimMarginModel.js

@@ -9,7 +9,7 @@ export class TwoDimMarginModel {
     constructor(designerConfig, configReader) {
         this.designerConfig = designerConfig;
         this.configReader = configReader;
-        this.twoDimLegendModel = new TwoDimLegendModel();
+        this.twoDimLegendModel = new TwoDimLegendModel(this.configReader);
     }
     recalcMargin(otherComponents, modelInstance) {
         const canvasModel = modelInstance.canvasModel;

package/lib/model/model.d.ts

@@ -265,6 +265,18 @@ export interface ValueField extends Field {
 }
 export interface MarkersOptions {
     show: boolean;
+    styles: MarkersStyleOptions;
+}
+export interface MarkersStyleOptions {
+    highlighted: MarkerStyle;
+    normal: MarkerStyle;
+}
+interface MarkerStyle {
+    size: MarkersBaseSizeOptions;
+}
+interface MarkersBaseSizeOptions {
+    radius: number;
+    borderSize: string;
 }
 interface IntervalChartDataModel {
     valueField1: ValueField;

package/lib/model/modelBuilder.d.ts

@@ -11,5 +11,17 @@ export declare const CLASSES: {
     legendColor: string;
     legendItem: string;
 };
+export declare const styledElementValues: {
+    defaultLegendMarkerSizes: {
+        widthPx: number;
+        heightPx: number;
+        marginRightPx: number;
+    };
+    legend: {
+        inlineLegendOneLineHeightPx: number;
+        inlineItemWrapperMarginRightPx: number;
+        inlineDynamicItemWrapperMarginRightPx: number;
+    };
+};
 export declare function assembleModel(config: MdtChartsConfig, data: MdtChartsDataSource, designerConfig: DesignerConfig): Model;
 export declare function getPreparedData(model: Model, data: MdtChartsDataSource, config: MdtChartsConfig): MdtChartsDataSource;

package/lib/model/modelBuilder.js

@@ -2,7 +2,6 @@ import { MarginModel } from './margin/marginModel';
 import { TwoDimensionalModel } from './notations/twoDimensionalModel';
 import { PolarModel } from './notations/polar/polarModel';
 import { DataManagerModel } from './dataManagerModel/dataManagerModel';
-import { IntervalModel } from './notations/intervalModel';
 import { OtherComponentsModel } from './featuresModel/otherComponents';
 import { ConfigValidator } from './configsValidator/configValidator';
 import { ModelInstance } from './modelInstance/modelInstance';
@@ -19,6 +18,18 @@ export const CLASSES = {
     legendColor: 'legend-circle',
     legendItem: 'legend-item',
 };
+export const styledElementValues = {
+    defaultLegendMarkerSizes: {
+        widthPx: 11,
+        heightPx: 11,
+        marginRightPx: 6
+    },
+    legend: {
+        inlineLegendOneLineHeightPx: 21,
+        inlineItemWrapperMarginRightPx: 12,
+        inlineDynamicItemWrapperMarginRightPx: 2
+    }
+};
 function getBlockCanvas(config, modelInstance) {
     const emptyBlockParams = { width: 0, height: 0 };
     const size = ConfigValidator.validateCanvasSize(modelInstance.canvasModel.getBlockSize()) ? Object.assign({}, modelInstance.canvasModel.getBlockSize()) : emptyBlockParams;
@@ -40,9 +51,6 @@ function getOptions(config, designerConfig, modelInstance) {
     else if (config.options.type === 'polar') {
         return PolarModel.getOptions(config.options, designerConfig, modelInstance);
     }
-    else if (config.options.type === 'interval') {
-        return IntervalModel.getOptions(config.options, designerConfig, modelInstance);
-    }
     else if (config.options.type === "card") {
         return CardsModelInstance.getOptions(config.options, modelInstance);
     }

package/lib/model/modelInstance/configReader.d.ts

@@ -1,4 +1,4 @@
-import { AxisLabelFormatter, MdtChartsConfig, MdtChartsField, MdtChartsTwoDimensionalOptions } from "../../config/config";
+import { AxisLabelFormatter, MdtChartsConfig, MdtChartsField, MdtChartsTwoDimensionalOptions, TwoDimensionalChartType } from "../../config/config";
 import { DesignerConfig } from "../../designer/designerConfig";
 interface BaseConfigReader {
     getValueFields(): MdtChartsField[];
@@ -10,6 +10,10 @@ export declare class TwoDimConfigReader implements BaseConfigReader {
     constructor(config: MdtChartsConfig, designerConfig: DesignerConfig);
     getValueFields(): MdtChartsField[];
     getAxisLabelFormatter(): AxisLabelFormatter;
+    getLegendItemInfo(): {
+        text: string;
+        chartType: TwoDimensionalChartType;
+    }[];
 }
 export declare class PolarConfigReader implements BaseConfigReader {
     private options;

package/lib/model/modelInstance/configReader.js

@@ -24,6 +24,16 @@ export class TwoDimConfigReader {
         const valueFieldFormat = this.options.charts[0].data.valueFields[0].format;
         return (v) => this.designerConfig.dataFormat.formatters(v, { type: valueFieldFormat });
     }
+    getLegendItemInfo() {
+        const info = [];
+        this.options.charts.forEach(c => {
+            c.data.valueFields.forEach(vf => {
+                var _a;
+                info.push({ text: (_a = vf.title) !== null && _a !== void 0 ? _a : vf.name, chartType: c.type });
+            });
+        });
+        return info;
+    }
 }
 export class PolarConfigReader {
     constructor(config) {

package/lib/model/notations/twoDimensional/styles.d.ts

@@ -1,6 +1,7 @@
 import { ChartLegendModel, LineLikeChartDashOptions, LineLikeChartShapeOptions } from "../../model";
-import { ChartOrientation, MdtChartsLineLikeChartDashedStyles, MdtChartsTwoDimensionalChart } from "../../../config/config";
+import { ChartOrientation, MdtChartsLineLikeChartDashedStyles, MdtChartsTwoDimensionalChart, TwoDimensionalChartType } from "../../../config/config";
 import { MdtChartsLineLikeChartShape } from "../../../designer/designerConfig";
 export declare function parseShape(chartOrientation: ChartOrientation, configOptions?: MdtChartsLineLikeChartShape): LineLikeChartShapeOptions;
 export declare function parseDashStyles(configOptions?: MdtChartsLineLikeChartDashedStyles): LineLikeChartDashOptions;
 export declare function getLegendMarkerOptions(chart: MdtChartsTwoDimensionalChart): ChartLegendModel;
+export declare function getWidthOfLegendMarkerByType(chartType: TwoDimensionalChartType): number;

package/lib/model/notations/twoDimensional/styles.js

@@ -1,4 +1,5 @@
 import { LineCurveType } from "../../model";
+import { styledElementValues } from "../../modelBuilder";
 export function parseShape(chartOrientation, configOptions) {
     var _a;
     const curveType = (_a = configOptions === null || configOptions === void 0 ? void 0 : configOptions.curve) === null || _a === void 0 ? void 0 : _a.type;
@@ -35,7 +36,15 @@ export function getLegendMarkerOptions(chart) {
     };
     return {
         markerShape: shapeByType[chart.type],
-        barViewOptions: { hatch: { on: (_c = (_b = (_a = chart.barStyles) === null || _a === void 0 ? void 0 : _a.hatch) === null || _b === void 0 ? void 0 : _b.on) !== null && _c !== void 0 ? _c : false }, width: 10 },
-        lineViewOptions: { dashedStyles: parseDashStyles((_d = chart.lineStyles) === null || _d === void 0 ? void 0 : _d.dash), width: 30 }
+        barViewOptions: { hatch: { on: (_c = (_b = (_a = chart.barStyles) === null || _a === void 0 ? void 0 : _a.hatch) === null || _b === void 0 ? void 0 : _b.on) !== null && _c !== void 0 ? _c : false }, width: getWidthOfLegendMarkerByType("bar") },
+        lineViewOptions: { dashedStyles: parseDashStyles((_d = chart.lineStyles) === null || _d === void 0 ? void 0 : _d.dash), width: getWidthOfLegendMarkerByType("line") }
     };
 }
+export function getWidthOfLegendMarkerByType(chartType) {
+    if (chartType === "bar")
+        return 10;
+    if (chartType === "line")
+        return 30;
+    if (chartType === "area")
+        return styledElementValues.defaultLegendMarkerSizes.widthPx;
+}

package/lib/model/notations/twoDimensionalModel.js

@@ -28,7 +28,7 @@ export class TwoDimensionalModel {
             },
             type: options.type,
             data: Object.assign({}, options.data),
-            charts: this.getChartsModel(options.charts, options.orientation, designerConfig.chartStyle),
+            charts: this.getChartsModel(options.charts, options.orientation, designerConfig),
             additionalElements: this.getAdditionalElements(options),
             tooltip: options.tooltip,
             chartSettings: this.getChartsSettings(designerConfig.canvas.chartOptions, options.orientation)
@@ -56,12 +56,12 @@ export class TwoDimensionalModel {
             lineLike: { shape: parseShape(chartOrientation, (_a = chartOptions.line) === null || _a === void 0 ? void 0 : _a.shape) }
         };
     }
-    static getChartsModel(charts, chartOrientation, chartStyleConfig) {
-        const styleModel = new TwoDimensionalChartStyleModel(charts, chartStyleConfig);
+    static getChartsModel(charts, chartOrientation, designerConfig) {
+        const styleModel = new TwoDimensionalChartStyleModel(charts, designerConfig.chartStyle);
         this.sortCharts(charts);
         const chartsModel = [];
         charts.forEach((chart, index) => {
-            var _a, _b, _c, _d;
+            var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
             chartsModel.push({
                 type: chart.type,
                 isSegmented: chart.isSegmented,
@@ -70,9 +70,22 @@ export class TwoDimensionalModel {
                 cssClasses: ChartStyleModelService.getCssClasses(index),
                 style: styleModel.getChartStyle(chart, index),
                 embeddedLabels: this.getEmbeddedLabelType(chart, chartOrientation),
-                markersOptions: chart.markers,
-                lineViewOptions: { dashedStyles: parseDashStyles((_a = chart.lineStyles) === null || _a === void 0 ? void 0 : _a.dash) },
-                barViewOptions: { hatch: { on: (_d = (_c = (_b = chart.barStyles) === null || _b === void 0 ? void 0 : _b.hatch) === null || _c === void 0 ? void 0 : _c.on) !== null && _d !== void 0 ? _d : false } },
+                markersOptions: {
+                    show: chart.markers.show,
+                    styles: {
+                        highlighted: {
+                            size: { radius: (_c = (_b = (_a = designerConfig.canvas.markers) === null || _a === void 0 ? void 0 : _a.highlighted) === null || _b === void 0 ? void 0 : _b.radius) !== null && _c !== void 0 ? _c : 4, borderSize: '3.5px' }
+                        },
+                        normal: {
+                            size: {
+                                radius: (_f = (_e = (_d = designerConfig.canvas.markers) === null || _d === void 0 ? void 0 : _d.normal) === null || _e === void 0 ? void 0 : _e.radius) !== null && _f !== void 0 ? _f : 3,
+                                borderSize: `${(_j = (_h = (_g = designerConfig.canvas.markers) === null || _g === void 0 ? void 0 : _g.normal) === null || _h === void 0 ? void 0 : _h.borderSize) !== null && _j !== void 0 ? _j : 2}px`
+                            }
+                        }
+                    }
+                },
+                lineViewOptions: { dashedStyles: parseDashStyles((_k = chart.lineStyles) === null || _k === void 0 ? void 0 : _k.dash) },
+                barViewOptions: { hatch: { on: (_o = (_m = (_l = chart.barStyles) === null || _l === void 0 ? void 0 : _l.hatch) === null || _m === void 0 ? void 0 : _m.on) !== null && _o !== void 0 ? _o : false } },
                 legend: getLegendMarkerOptions(chart),
                 index
             });

package/lib/style/charts-main.css

@@ -69,8 +69,8 @@
     overflow: hidden;
     text-overflow: ellipsis;
 }
-.legend-wrapper-without-wrap .legend-item-inline:not(:first-of-type) {
-    margin-left: 20px;
+.legend-wrapper-without-wrap .legend-item-inline:not(:last-of-type) {
+    margin-right: 12px
 }
 .legend-wrapper-with-wrap .legend-item-inline {
     margin: 2px;
@@ -98,7 +98,7 @@
     text-overflow: ellipsis;
 }
 .legend-marker {
-    margin-right: 8px;
+    margin-right: 6px;
 }
 .legend-circle {
     position: relative;
@@ -107,7 +107,7 @@
     width: 11px;
     height: 11px;
     border-radius: 50%;
-    margin-right: 8px;
+    margin-right: 6px;
 }
 
 

package/lib/style/charts-main.less

@@ -69,8 +69,8 @@
     overflow: hidden;
     text-overflow: ellipsis;
 }
-.legend-wrapper-without-wrap .legend-item-inline:not(:first-of-type) {
-    margin-left: 20px;
+.legend-wrapper-without-wrap .legend-item-inline:not(:last-of-type) {
+    margin-right: 12px
 }
 .legend-wrapper-with-wrap .legend-item-inline {
     margin: 2px;
@@ -98,7 +98,7 @@
     text-overflow: ellipsis;
 }
 .legend-marker {
-    margin-right: 8px;
+    margin-right: 6px;
 }
 .legend-circle {
     position: relative;
@@ -107,7 +107,7 @@
     width: 11px;
     height: 11px;
     border-radius: 50%;
-    margin-right: 8px;
+    margin-right: 6px;
 }
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mdt-charts",
-  "version": "1.14.0",
+  "version": "1.15.0",
   "description": "",
   "main": "lib/main.js",
   "scripts": {