mdt-charts 1.12.7 → 1.12.11

package/lib/designer/designerConfig.d.ts

@@ -30,7 +30,7 @@ interface BlockMargin {
     right: number;
 }
 export interface LegendBlockCanvas {
-    maxWidth: number;
+    maxWidth: number | string;
 }
 interface ChartOptionsCanvas {
     bar: BarOptionsCanvas;

package/lib/engine/twoDimensionalNotation/area/area.js

@@ -1,9 +1,9 @@
-import { stack } from 'd3-shape';
 import { select } from 'd3-selection';
 import { MarkDot } from "../../features/markDots/markDot";
 import { AreaHelper } from './areaHelper';
 import { DomHelper } from '../../helpers/domHelper';
 import { Helper } from '../../helpers/helper';
+import { getStackedDataWithOwn } from '../bar/stackedData/dataStacker';
 export class Area {
     static render(block, scales, data, keyField, margin, keyAxisOrient, chart, blockSize) {
         if (chart.isSegmented)
@@ -44,7 +44,7 @@ export class Area {
         });
     }
     static renderSegmented(block, scales, data, keyField, margin, keyAxisOrient, chart) {
-        const stackedData = stack().keys(chart.data.valueFields.map(field => field.name))(data);
+        const stackedData = getStackedDataWithOwn(data, chart.data.valueFields.map(field => field.name));
         const areaGenerator = AreaHelper.getSegmentedAreaGenerator(keyAxisOrient, scales, margin, keyField.name);
         const areas = block.getChartGroup(chart.index)
             .selectAll(`.${this.areaChartClass}${Helper.getCssClassesLine(chart.cssClasses)}`)
@@ -76,7 +76,7 @@ export class Area {
         return promises;
     }
     static updateSegmented(block, scales, newData, keyField, margin, chart, keyAxisOrient) {
-        const stackedData = stack().keys(chart.data.valueFields.map(field => field.name))(newData);
+        const stackedData = getStackedDataWithOwn(newData, chart.data.valueFields.map(field => field.name));
         const areaGenerator = AreaHelper.getSegmentedAreaGenerator(keyAxisOrient, scales, margin, keyField.name);
         const areas = block.getChartGroup(chart.index)
             .selectAll(`path.${this.areaChartClass}${Helper.getCssClassesLine(chart.cssClasses)}`)

package/lib/engine/twoDimensionalNotation/bar/bar.js

@@ -1,4 +1,3 @@
-import { stack } from 'd3-shape';
 import { select } from 'd3-selection';
 import { EmbeddedLabels } from "../../features/embeddedLabels/embeddedLabels";
 import { EmbeddedLabelsHelper } from "../../features/embeddedLabels/embeddedLabelsHelper";
@@ -6,6 +5,7 @@ import { BarHelper } from "./barHelper";
 import { sum } from "d3-array";
 import { DomHelper } from "../../helpers/domHelper";
 import { Helper } from "../../helpers/helper";
+import { getStackedDataWithOwn } from './stackedData/dataStacker';
 export class Bar {
     static render(block, scales, data, keyField, margin, keyAxisOrient, chart, blockSize, barSettings, barsAmounts, isSegmented, firstBarIndex) {
         if (isSegmented)
@@ -52,7 +52,7 @@ export class Bar {
         });
     }
     static renderSegmented(block, scales, data, keyField, margin, keyAxisOrient, chart, barsAmounts, blockSize, firstBarIndex, barSettings) {
-        const stackedData = stack().keys(chart.data.valueFields.map(field => field.name))(data);
+        const stackedData = getStackedDataWithOwn(data, chart.data.valueFields.map(field => field.name));
         let groups = block.getChartGroup(chart.index)
             .selectAll(`g.${this.barSegmentGroupClass}${Helper.getCssClassesLine(chart.cssClasses)}`)
             .data(stackedData);
@@ -129,7 +129,7 @@ export class Bar {
         return promises;
     }
     static updateSegmented(block, newData, scales, margin, keyAxisOrient, chart, blockSize, barsAmounts, keyField, firstBarIndex, barSettings) {
-        const stackedData = stack().keys(chart.data.valueFields.map(field => field.name))(newData);
+        const stackedData = getStackedDataWithOwn(newData, chart.data.valueFields.map(field => field.name));
         block.getChartGroup(chart.index)
             .selectAll(`.${this.barItemClass}${Helper.getCssClassesLine(chart.cssClasses)}`)
             .filter(d => newData.findIndex(row => row[keyField.name] === d.data[keyField.name]) === -1)

package/lib/engine/twoDimensionalNotation/bar/barHelper.js

@@ -84,20 +84,20 @@ export class BarHelper {
     }
     static setSegmentedBarAttrsByValue(attrs, keyAxisOrient, scaleValue, margin, blockSize) {
         if (keyAxisOrient === 'top') {
-            attrs.y = d => margin.top + scaleValue(d[0]);
-            attrs.height = d => Helper.getValueOrZero(scaleValue(d[1] - d[0]));
+            attrs.y = d => scaleValue(Math.min(d[1], d[0])) + margin.top;
+            attrs.height = d => Math.abs(scaleValue(d[1]) - scaleValue(d[0]));
         }
         if (keyAxisOrient === 'bottom') {
-            attrs.y = d => scaleValue(d[1]) + margin.top;
-            attrs.height = d => Helper.getValueOrZero(blockSize.height - margin.top - margin.bottom - scaleValue(d[1] - d[0]));
+            attrs.y = d => scaleValue(Math.max(d[1], d[0])) + margin.top;
+            attrs.height = d => Math.abs(scaleValue(d[1]) - scaleValue(d[0]));
         }
         if (keyAxisOrient === 'left') {
-            attrs.x = d => margin.left + scaleValue(d[0]) + 1;
-            attrs.width = d => Helper.getValueOrZero(scaleValue(d[1] - d[0]));
+            attrs.x = d => scaleValue(Math.min(d[1], d[0])) + margin.left;
+            attrs.width = d => Math.abs(scaleValue(d[1]) - scaleValue(d[0]));
         }
         if (keyAxisOrient === 'right') {
-            attrs.x = d => scaleValue(d[1]) + margin.left;
-            attrs.width = d => Helper.getValueOrZero(blockSize.width - margin.left - margin.right - scaleValue(d[1] - d[0]));
+            attrs.x = d => scaleValue(Math.max(d[1], d[0])) + margin.left;
+            attrs.width = d => Math.abs(scaleValue(d[1]) - scaleValue(d[0]));
         }
     }
 }

package/lib/engine/twoDimensionalNotation/bar/stackedData/dataStacker.d.ts

@@ -0,0 +1,13 @@
+import { MdtChartsDataRow } from "../../../../config/config";
+export interface StackedDataRow {
+    0: number;
+    1: number;
+    data: MdtChartsDataRow;
+}
+export declare type StackedDataFull = StackedDataRow[][];
+export declare class DataStacker {
+    private service;
+    getStackedData(rawData: MdtChartsDataRow[], valueFields: string[]): StackedDataFull;
+}
+export declare function getStackedDataWithOwn(rawData: MdtChartsDataRow[], valueFields: string[]): StackedDataFull;
+export declare function getStackedDataWithD3(rawData: MdtChartsDataRow[], valueFields: string[]): StackedDataFull;

package/lib/engine/twoDimensionalNotation/bar/stackedData/dataStacker.js

@@ -0,0 +1,32 @@
+import { stack } from "d3-shape";
+import { DataStackerService } from "./dataStackerService";
+export class DataStacker {
+    constructor() {
+        this.service = new DataStackerService();
+    }
+    getStackedData(rawData, valueFields) {
+        const stackedData = [];
+        valueFields.forEach((vField, vfIndex) => {
+            const fieldStack = [];
+            rawData.forEach((dataRow, drIndex) => {
+                const valueFromData = dataRow[vField];
+                const value0 = this.service.getValue0(stackedData, vfIndex, drIndex, valueFromData);
+                const value1 = this.service.getValue1(value0, valueFromData);
+                fieldStack.push({
+                    "0": value0,
+                    "1": value1,
+                    data: dataRow
+                });
+            });
+            stackedData.push(fieldStack);
+        });
+        return stackedData;
+    }
+}
+export function getStackedDataWithOwn(rawData, valueFields) {
+    const stacker = new DataStacker();
+    return stacker.getStackedData(rawData, valueFields);
+}
+export function getStackedDataWithD3(rawData, valueFields) {
+    return stack().keys(valueFields)(rawData);
+}

package/lib/engine/twoDimensionalNotation/bar/stackedData/dataStacker.test.d.ts

@@ -0,0 +1 @@
+export {};

package/lib/engine/twoDimensionalNotation/bar/stackedData/dataStacker.test.js

@@ -0,0 +1,199 @@
+import { DataStacker } from "./dataStacker";
+import { DataStackerService } from "./dataStackerService";
+describe('DataStacker', () => {
+    const stacker = new DataStacker();
+    describe('getStackedData', () => {
+        describe('for positive values', () => {
+            let dataRows = [
+                { price: 12, count: 30 },
+                { price: 30, count: 12 },
+                { price: 0, count: 100 },
+                { price: 10, count: 0 }
+            ];
+            const valueFields = ["price", "count"];
+            test('should return right stack', () => {
+                const res = stacker.getStackedData(dataRows, valueFields);
+                expect(res).toEqual([
+                    [
+                        { "0": 0, "1": 12, data: dataRows[0] },
+                        { "0": 0, "1": 30, data: dataRows[1] },
+                        { "0": 0, "1": 0, data: dataRows[2] },
+                        { "0": 0, "1": 10, data: dataRows[3] },
+                    ],
+                    [
+                        { "0": 12, "1": 42, data: dataRows[0] },
+                        { "0": 30, "1": 42, data: dataRows[1] },
+                        { "0": 0, "1": 100, data: dataRows[2] },
+                        { "0": 10, "1": 10, data: dataRows[3] },
+                    ]
+                ]);
+            });
+        });
+        describe('for negative values', () => {
+            let dataRows = [
+                { price: -12, count: -30 },
+                { price: -30, count: -12 },
+                { price: 0, count: -100 },
+                { price: -10, count: 0 }
+            ];
+            const valueFields = ["price", "count"];
+            test('should return right stack', () => {
+                const res = stacker.getStackedData(dataRows, valueFields);
+                expect(res).toEqual([
+                    [
+                        { "0": 0, "1": -12, data: dataRows[0] },
+                        { "0": 0, "1": -30, data: dataRows[1] },
+                        { "0": 0, "1": 0, data: dataRows[2] },
+                        { "0": 0, "1": -10, data: dataRows[3] },
+                    ],
+                    [
+                        { "0": -12, "1": -42, data: dataRows[0] },
+                        { "0": -30, "1": -42, data: dataRows[1] },
+                        { "0": 0, "1": -100, data: dataRows[2] },
+                        { "0": -10, "1": -10, data: dataRows[3] },
+                    ]
+                ]);
+            });
+        });
+    });
+});
+describe('DataStackerService', () => {
+    const service = new DataStackerService();
+    let data = [
+        [
+            { "0": 0, "1": 42, data: {} },
+            { "0": 0, "1": -123, data: {} }
+        ]
+    ];
+    describe('getLastValue', () => {
+        test('should return 0 if vfIndex is 0', () => {
+            const res = service.getValue0(data, 0, 0, 0);
+            expect(res).toBe(0);
+        });
+        test('should return last positive values if positive value exists and need positive', () => {
+            const res = service.getValue0(data, 1, 0, 12);
+            expect(res).toBe(42);
+        });
+        test('should return 0 if positive value not exists and need positive', () => {
+            const res = service.getValue0(data, 1, 1, 12);
+            expect(res).toBe(0);
+        });
+        test('should return last negative value if negative value exists and need negative', () => {
+            const res = service.getValue0(data, 1, 1, -12);
+            expect(res).toBe(-123);
+        });
+        test('should return 0 if negative value not exists and need negative', () => {
+            const res = service.getValue0(data, 1, 0, -12);
+            expect(res).toBe(0);
+        });
+    });
+    describe('getValue1', () => {
+        test('should return sum of value0 + value from data', () => {
+            let res = service.getValue1(0, 12);
+            expect(res).toBe(12);
+            res = service.getValue1(-12, -30);
+            expect(res).toBe(-42);
+            res = service.getValue1(0, 30);
+            expect(res).toBe(30);
+            res = service.getValue1(0, -30);
+            expect(res).toBe(-30);
+        });
+    });
+});
+describe('real example (positive only)', () => {
+    const stacker = new DataStacker();
+    const data = [
+        {
+            $id: 1,
+            brand: "BMW BMW",
+            price: 100000,
+            count: 12000,
+            color: "red"
+        },
+        {
+            $id: 2,
+            brand: "LADA",
+            price: 0,
+            count: 1000,
+            color: "green"
+        },
+        {
+            $id: 3,
+            brand: "MERCEDES",
+            price: 15000,
+            count: 1200,
+            color: "blue"
+        },
+        {
+            $id: 4,
+            brand: "AUDI",
+            price: 20000,
+            count: 500,
+            color: "yellow"
+        },
+        {
+            $id: 5,
+            brand: "VOLKSWAGEN",
+            price: 115000,
+            count: 6000,
+            color: "cyan"
+        },
+        {
+            $id: 6,
+            brand: "DODGE",
+            price: 115000,
+            count: 4000,
+            color: "red"
+        },
+        {
+            $id: 7,
+            brand: "SAAB",
+            price: 50000,
+            count: 11000,
+            color: "orange"
+        },
+        {
+            $id: 8,
+            brand: "HONDA",
+            price: 20000,
+            count: 2000,
+            color: "brown"
+        },
+        {
+            $id: 9,
+            brand: "TOYOTA",
+            price: 40000,
+            count: 15000,
+            color: "pink"
+        }
+    ];
+    const valueFields = ["price", "count"];
+    const stackedData = [
+        [
+            { "0": 0, "1": 100000, data: data[0] },
+            { "0": 0, "1": 0, data: data[1] },
+            { "0": 0, "1": 15000, data: data[2] },
+            { "0": 0, "1": 20000, data: data[3] },
+            { "0": 0, "1": 115000, data: data[4] },
+            { "0": 0, "1": 115000, data: data[5] },
+            { "0": 0, "1": 50000, data: data[6] },
+            { "0": 0, "1": 20000, data: data[7] },
+            { "0": 0, "1": 40000, data: data[8] }
+        ],
+        [
+            { "0": 100000, "1": 112000, data: data[0] },
+            { "0": 0, "1": 1000, data: data[1] },
+            { "0": 15000, "1": 16200, data: data[2] },
+            { "0": 20000, "1": 20500, data: data[3] },
+            { "0": 115000, "1": 121000, data: data[4] },
+            { "0": 115000, "1": 119000, data: data[5] },
+            { "0": 50000, "1": 61000, data: data[6] },
+            { "0": 20000, "1": 22000, data: data[7] },
+            { "0": 40000, "1": 55000, data: data[8] }
+        ]
+    ];
+    test('check on real example', () => {
+        const res = stacker.getStackedData(data, valueFields);
+        expect(res).toEqual(stackedData);
+    });
+});

package/lib/engine/twoDimensionalNotation/bar/stackedData/dataStackerService.d.ts

@@ -0,0 +1,5 @@
+import { StackedDataFull } from "./dataStacker";
+export declare class DataStackerService {
+    getValue0(stackedData: StackedDataFull, vfIndex: number, drIndex: number, valueFromData: number): number;
+    getValue1(value0: number, valueFromData: number): number;
+}

package/lib/engine/twoDimensionalNotation/bar/stackedData/dataStackerService.js

@@ -0,0 +1,19 @@
+export class DataStackerService {
+    getValue0(stackedData, vfIndex, drIndex, valueFromData) {
+        if (vfIndex === 0)
+            return 0;
+        for (let i = vfIndex - 1; i >= 0; i--) {
+            if (valueFromData === 0) {
+                return stackedData[i][drIndex][1];
+            }
+            const needed = stackedData[i][drIndex][1] >= 0 === valueFromData >= 0;
+            if (needed) {
+                return stackedData[i][drIndex][1];
+            }
+        }
+        return 0;
+    }
+    getValue1(value0, valueFromData) {
+        return value0 + valueFromData;
+    }
+}

package/lib/model/chartStyleModel/TwoDimensionalChartStyleModel.js

@@ -1,5 +1,5 @@
 import * as chroma from "chroma-js";
-import { ModelHelper } from "../modelHelper";
+import { ModelHelper } from "../helpers/modelHelper";
 import { ChartStyleModelService } from "./chartStyleModel";
 export class TwoDimensionalChartStyleModel {
     constructor(charts, chartStyleConfig) {

package/lib/model/dataManagerModel/dataManagerModel.d.ts

@@ -11,6 +11,7 @@ export interface DataLegendParams {
 }
 export declare class DataManagerModel {
     private static service;
+    private static polarMarginCalculator;
     static getPreparedData(data: MdtChartsDataSource, allowableKeys: string[], config: MdtChartsConfig): MdtChartsDataSource;
     static initDataScope(config: MdtChartsConfig, data: MdtChartsDataSource, designerConfig: DesignerConfig, legendBlock: LegendBlockModel, modelInstance: ModelInstance): void;
     static getDataValuesByKeyField(data: MdtChartsDataSource, dataSourceName: string, keyFieldName: string): string[];

package/lib/model/dataManagerModel/dataManagerModel.js

@@ -1,9 +1,9 @@
 import { AxisModel } from "../featuresModel/axisModel";
 import { LegendCanvasModel } from "../featuresModel/legendModel/legendCanvasModel";
-import { LegendPolarMarginCalculator } from "../featuresModel/legendModel/polarMarginCalculator";
-import { ModelHelper } from "../modelHelper";
+import { ModelHelper } from "../helpers/modelHelper";
 import { MIN_DONUT_BLOCK_SIZE, PolarModel } from "../notations/polar/polarModel";
 import { DataManagerModelService } from "./dataManagerModelService";
+import { LegendPolarMarginCalculator } from "../featuresModel/legendModel/polarMarginCalculator";
 export class DataManagerModel {
     static getPreparedData(data, allowableKeys, config) {
         const scopedData = this.getScopedData(data, allowableKeys, config);
@@ -66,14 +66,13 @@ export class DataManagerModel {
         //TODO: global refactor of method
         const allowableKeys = keys.slice(0, maxItemsNumber);
         const hidedRecordsAmount = keys.length - maxItemsNumber;
-        const marginCalculator = new LegendPolarMarginCalculator();
-        marginCalculator.updateMargin(position, canvasModel, legendBlock, position === "bottom" ? size.height : size.width);
+        this.polarMarginCalculator.updateMargin(position, canvasModel, legendBlock, position === "bottom" ? size.height : size.width);
         modelInstance.dataModel.initScope(this.limitAllowableKeys(allowableKeys, hidedRecordsAmount, modelInstance.dataModel));
     }
     //TODO: position type
     static getLegendDataParams(position, keys, legendCanvas, canvasModel, legendBlock) {
         if (position === 'right') {
-            return LegendCanvasModel.findElementsAmountByLegendSize(keys, position, legendCanvas.maxWidth, canvasModel.getChartBlockHeight() - legendBlock.coordinate.bottom.margin.bottom);
+            return LegendCanvasModel.findElementsAmountByLegendSize(keys, 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);
@@ -143,3 +142,4 @@ export class DataManagerModel {
     }
 }
 DataManagerModel.service = new DataManagerModelService();
+DataManagerModel.polarMarginCalculator = new LegendPolarMarginCalculator();

package/lib/model/featuresModel/axisModel.js

@@ -1,4 +1,4 @@
-import { ModelHelper } from "../modelHelper";
+import { ModelHelper } from "../helpers/modelHelper";
 import { AxisType, CLASSES } from "../modelBuilder";
 import { DataManagerModel } from "../dataManagerModel/dataManagerModel";
 import { TwoDimensionalModel } from "../notations/twoDimensionalModel";
@@ -111,11 +111,15 @@ export class AxisModel {
         let translateY;
         let translateX;
         if (chartOrientation === "vertical") {
-            translateY = getZeroCoordinate() + canvasModel.getMarginSide("top");
+            translateY = getZeroCoordinate
+                ? getZeroCoordinate() + canvasModel.getMarginSide("top")
+                : AxisModel.getAxisTranslateY(AxisType.Key, chartOrientation, axisPosition, canvasModel);
             translateX = AxisModel.getAxisTranslateX(AxisType.Key, chartOrientation, axisPosition, canvasModel);
         }
         else {
-            translateX = getZeroCoordinate() + canvasModel.getMarginSide("left");
+            translateX = getZeroCoordinate
+                ? getZeroCoordinate() + canvasModel.getMarginSide("left")
+                : AxisModel.getAxisTranslateX(AxisType.Key, chartOrientation, axisPosition, canvasModel);
             translateY = AxisModel.getAxisTranslateY(AxisType.Key, chartOrientation, axisPosition, canvasModel);
         }
         return {

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

@@ -2,7 +2,6 @@ import { DataLegendParams } from "../../dataManagerModel/dataManagerModel";
 import { LegendPosition } from "../../model";
 export declare type LegendItemsDirection = 'row' | 'column';
 export declare class LegendCanvasModel {
-    static getLegendHeight(texts: string[], chartBlockWidth: number, itemsDirection: LegendItemsDirection, legendPosition: LegendPosition): number;
     static getLegendItemWidth(text: string): number;
     static findElementsAmountByLegendSize(texts: string[], position: LegendPosition, legendBlockWidth: number, legendBlockHeight: number): DataLegendParams;
     private static getLegendWrapperEl;

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

@@ -1,30 +1,5 @@
 import { CLASSES } from "../../modelBuilder";
 export class LegendCanvasModel {
-    static getLegendHeight(texts, chartBlockWidth, itemsDirection, legendPosition) {
-        const legendWrapper = this.getLegendWrapperEl(chartBlockWidth, itemsDirection);
-        texts.forEach(text => {
-            const itemWrapper = document.createElement('div');
-            const colorBlock = document.createElement('span');
-            const textBlock = document.createElement('span');
-            itemWrapper.classList.add("legend-item");
-            if (legendPosition === 'bottom') {
-                itemWrapper.classList.add('legend-item-inline');
-                textBlock.classList.add('legend-label-nowrap');
-            }
-            else {
-                itemWrapper.classList.add('legend-item-row');
-            }
-            colorBlock.classList.add(CLASSES.legendColor);
-            textBlock.classList.add(CLASSES.legendLabel);
-            textBlock.textContent = text;
-            itemWrapper.append(colorBlock, textBlock);
-            legendWrapper.append(itemWrapper);
-        });
-        document.body.append(legendWrapper);
-        const height = legendWrapper.offsetHeight;
-        legendWrapper.remove();
-        return height + 1;
-    }
     static getLegendItemWidth(text) {
         const itemWrapper = document.createElement('div');
         itemWrapper.style.opacity = '0';

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

@@ -1,11 +1,7 @@
-import { ChartNotation, Size } from "../../../config/config";
-import { ILegendModel, LegendBlockModel, Orient } from "../../model";
+import { LegendBlockModel } from "../../model";
 import { CanvasModel } from "../../modelInstance/canvasModel/canvasModel";
 import { LegendItemsDirection } from "./legendCanvasModel";
 export declare class LegendModel {
-    static getLegendSize(chartNotation: ChartNotation, position: Orient, texts: string[], legendMaxWidth: number, blockSize: Size, legendBlockModel: LegendBlockModel): number;
-    static getBaseLegendBlockModel(notation: ChartNotation, canvasModel: CanvasModel): LegendBlockModel;
-    static getLegendModel(chartNotation: ChartNotation, legendShow: boolean, canvasModel: CanvasModel): ILegendModel;
+    static getBaseLegendBlockModel(canvasModel: CanvasModel): LegendBlockModel;
     static getLegendItemClass(itemsPosition: LegendItemsDirection): string;
-    private static getLegendWidth;
 }

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

@@ -1,20 +1,5 @@
-import { ModelHelper } from "../../modelHelper";
-import { PolarModel } from "../../notations/polar/polarModel";
-import { LegendCanvasModel } from "./legendCanvasModel";
 export class LegendModel {
-    static getLegendSize(chartNotation, position, texts, legendMaxWidth, blockSize, legendBlockModel) {
-        if (position === 'left' || position === 'right')
-            return this.getLegendWidth(texts, legendMaxWidth);
-        //TODO: rm duplicate
-        if (chartNotation === '2d' || chartNotation === 'interval') {
-            return LegendCanvasModel.getLegendHeight(texts, blockSize.width - legendBlockModel.coordinate[position].margin.left - legendBlockModel.coordinate[position].margin.right, 'row', position);
-        }
-        else if (chartNotation === 'polar') {
-            const size = LegendCanvasModel.getLegendHeight(texts, blockSize.width - legendBlockModel.coordinate[position].margin.left - legendBlockModel.coordinate[position].margin.right, 'row', position);
-            return size;
-        }
-    }
-    static getBaseLegendBlockModel(notation, canvasModel) {
+    static getBaseLegendBlockModel(canvasModel) {
         const mt = 20, mb = 20, ml = 20, mr = 20;
         return {
             coordinate: {
@@ -38,38 +23,10 @@ export class LegendModel {
                     margin: { top: 5, bottom: 10, left: 0, right: 0 },
                     pad: canvasModel.titleCanvas.getAllNeededSpace()
                 }
-            },
-            standartTooltip: notation === 'polar' ? false : true
-        };
-    }
-    static getLegendModel(chartNotation, legendShow, canvasModel) {
-        if (!legendShow)
-            return {
-                position: 'off'
-            };
-        let legendPosition = 'off';
-        if (chartNotation === '2d' || chartNotation === 'interval')
-            legendPosition = 'top';
-        else if (chartNotation === 'polar') {
-            legendPosition = PolarModel.getLegendPositionByBlockSize(canvasModel);
-        }
-        return {
-            position: legendPosition
+            }
         };
     }
     static getLegendItemClass(itemsPosition) {
         return itemsPosition === 'column' ? 'legend-item-row' : 'legend-item-inline';
     }
-    static getLegendWidth(texts, legendMaxWidth) {
-        let longestText = '';
-        let biggestScore = 0;
-        texts.forEach(text => {
-            if (ModelHelper.getStringScore(text) > biggestScore) {
-                longestText = text;
-                biggestScore = ModelHelper.getStringScore(text);
-            }
-        });
-        const maxWidth = LegendCanvasModel.getLegendItemWidth(longestText + '?'); // One letter reserve
-        return maxWidth > legendMaxWidth ? legendMaxWidth : maxWidth;
-    }
 }

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

@@ -1,11 +1,8 @@
-import { MdtChartsDataSource, MdtChartsPolarOptions } from "../../../config/config";
+import { LegendBlockCanvas } from "../../../designer/designerConfig";
 import { LegendBlockModel } from "../../model";
 import { CanvasModel } from "../../modelInstance/canvasModel/canvasModel";
-import { ModelInstance } from "../../modelInstance/modelInstance";
 export declare class LegendPolarMarginCalculator {
-    recalcMargin(modelInstance: ModelInstance, options: MdtChartsPolarOptions, legendMaxWidth: number, legendBlockModel: LegendBlockModel, data: MdtChartsDataSource): void;
     updateMargin(legendPosition: "right" | "bottom", canvasModel: CanvasModel, legendBlockModel: LegendBlockModel, size: number): void;
+    getMaxLegendWidth(legendCanvas: LegendBlockCanvas, blockWidth: number): number;
     private updateMarginObj;
-    private getLegendSize;
-    private getLegendItemsContent;
 }

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

@@ -1,30 +1,20 @@
-import { DataManagerModel } from "../../dataManagerModel/dataManagerModel";
+import { getPxPercentUnitByValue } from "../../helpers/unitsFromConfigReader";
 import { MarginModel } from "../../marginModel";
-import { MIN_DONUT_BLOCK_SIZE } from "../../notations/polar/polarModel";
-import { LegendModel } from "./legendModel";
 export class LegendPolarMarginCalculator {
-    recalcMargin(modelInstance, options, legendMaxWidth, legendBlockModel, data) {
-        const canvasModel = modelInstance.canvasModel;
-        let legendPosition = LegendModel.getLegendModel(options.type, options.legend.show, modelInstance.canvasModel).position;
-        modelInstance.canvasModel.legendCanvas.setPosition(legendPosition);
-        if (legendPosition === "off")
-            return;
-        let legendSize = this.getLegendSize(options, legendMaxWidth, legendBlockModel, data, canvasModel, legendPosition);
-        if (legendPosition === "right" && canvasModel.getChartBlockWidth() - legendSize < MIN_DONUT_BLOCK_SIZE) {
-            legendSize = this.getLegendSize(options, legendMaxWidth, legendBlockModel, data, canvasModel, "bottom");
-            legendPosition = "bottom";
-            modelInstance.canvasModel.legendCanvas.setPosition(legendPosition);
-        }
-        if (legendSize !== 0) {
-            canvasModel.increaseMarginSide(legendPosition, legendSize);
-            MarginModel.appendToGlobalMarginValuesLegendMargin(canvasModel, legendPosition, legendBlockModel);
-        }
-        legendBlockModel.coordinate[legendPosition].size = legendSize;
-    }
     updateMargin(legendPosition, canvasModel, legendBlockModel, size) {
         canvasModel.legendCanvas.setPosition(legendPosition);
         this.updateMarginObj(legendBlockModel, legendPosition, size, canvasModel);
     }
+    getMaxLegendWidth(legendCanvas, blockWidth) {
+        const maxWidth = legendCanvas.maxWidth;
+        if (typeof maxWidth === "number")
+            return maxWidth;
+        const unit = getPxPercentUnitByValue(maxWidth);
+        const maxWidthNumber = parseInt(maxWidth);
+        if (unit === "px")
+            return maxWidthNumber;
+        return maxWidthNumber / 100 * blockWidth;
+    }
     updateMarginObj(legendBlockModel, legendPosition, legendSize, canvasModel) {
         if (legendSize !== 0) {
             canvasModel.increaseMarginSide(legendPosition, legendSize);
@@ -32,11 +22,4 @@ export class LegendPolarMarginCalculator {
         }
         legendBlockModel.coordinate[legendPosition].size = legendSize;
     }
-    getLegendSize(options, legendMaxWidth, legendBlockModel, data, canvasModel, legendPosition) {
-        const legendItemsContent = this.getLegendItemsContent(options, data);
-        return LegendModel.getLegendSize(options.type, legendPosition, legendItemsContent, legendMaxWidth, canvasModel.getBlockSize(), legendBlockModel);
-    }
-    getLegendItemsContent(options, data) {
-        return DataManagerModel.getDataValuesByKeyField(data, options.data.dataSource, options.data.keyField.name);
-    }
 }

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

@@ -0,0 +1,7 @@
+import { LegendBlockModel } from "../../model";
+import { ModelInstance } from "../../modelInstance/modelInstance";
+export declare class TwoDimLegendModel {
+    recalcMarginWith2DLegend(modelInstance: ModelInstance, legendBlockModel: LegendBlockModel): void;
+    private getLegendSize;
+    private getLegendModel;
+}

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

@@ -0,0 +1,24 @@
+import { MarginModel } from "../../marginModel";
+export class TwoDimLegendModel {
+    recalcMarginWith2DLegend(modelInstance, legendBlockModel) {
+        const canvasModel = modelInstance.canvasModel;
+        const legendPosition = this.getLegendModel().position;
+        modelInstance.canvasModel.legendCanvas.setPosition(legendPosition);
+        if (legendPosition !== 'off') {
+            const legendSize = this.getLegendSize();
+            canvasModel.increaseMarginSide(legendPosition, legendSize);
+            if (legendSize !== 0)
+                MarginModel.appendToGlobalMarginValuesLegendMargin(canvasModel, legendPosition, legendBlockModel);
+            legendBlockModel.coordinate[legendPosition].size = legendSize;
+        }
+    }
+    getLegendSize() {
+        const heightOfLegendItemWithoutWordWrapping = 20;
+        return heightOfLegendItemWithoutWordWrapping;
+    }
+    getLegendModel() {
+        return {
+            position: "top"
+        };
+    }
+}

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

@@ -1,11 +1,9 @@
 import { OtherCommonComponents } from "../model";
 import { ElementsOptions } from "../../designer/designerConfig";
-import { ChartNotation } from "../../config/config";
 import { ModelInstance } from "../modelInstance/modelInstance";
 interface OtherComponentsModelDependencies {
     elementsOptions: ElementsOptions;
     title: string;
-    notation: ChartNotation;
 }
 export declare class OtherComponentsModel {
     static getOtherComponentsModel(dependencies: OtherComponentsModelDependencies, modelInstance: ModelInstance): OtherCommonComponents;

package/lib/model/featuresModel/otherComponents.js

@@ -6,7 +6,7 @@ export class OtherComponentsModel {
         const canvasModel = modelInstance.canvasModel;
         canvasModel.titleCanvas.init(TitleModel.getTitleModel(dependencies.title));
         return {
-            legendBlock: LegendModel.getBaseLegendBlockModel(dependencies.notation, canvasModel),
+            legendBlock: LegendModel.getBaseLegendBlockModel(canvasModel),
             titleBlock: canvasModel.titleCanvas.getModel(),
             tooltipBlock: TooltipModel.getTooltipModel(dependencies.elementsOptions.tooltip)
         };

package/lib/model/featuresModel/scaleModel/scaleModel.js

@@ -1,4 +1,4 @@
-import { ModelHelper } from "../../modelHelper";
+import { ModelHelper } from "../../helpers/modelHelper";
 export var ScaleType;
 (function (ScaleType) {
     ScaleType[ScaleType["Key"] = 0] = "Key";
@@ -86,7 +86,7 @@ export class ScaleModel {
             dataRows.forEach(dataRow => {
                 let sumInRow = 0;
                 chart.data.valueFields.forEach(field => {
-                    if (chart.isSegmented)
+                    if (chart.isSegmented && dataRow[field.name] > 0)
                         sumInRow += dataRow[field.name];
                     else if (dataRow[field.name] > sumInRow)
                         sumInRow = dataRow[field.name];
@@ -103,7 +103,10 @@ export class ScaleModel {
             dataRows.forEach(dataRow => {
                 let sumInRow = 0;
                 chart.data.valueFields.forEach(field => {
-                    if (dataRow[field.name] < sumInRow)
+                    if (chart.isSegmented && dataRow[field.name] < 0) {
+                        sumInRow += dataRow[field.name];
+                    }
+                    else if (dataRow[field.name] < sumInRow)
                         sumInRow = dataRow[field.name];
                 });
                 if (min > sumInRow)

package/lib/model/helpers/modelHelper.d.ts

@@ -0,0 +1,7 @@
+import { MdtChartsDataSource, IntervalChart } from "../../config/config";
+export declare class ModelHelper {
+    static getSum(items: number[]): number;
+    static getMinAndMaxOfIntervalData(data: MdtChartsDataSource, dataSource: string, chart: IntervalChart): [Date, Date];
+    static getUniqueValues(values: string[]): string[];
+    static getStringScore(word: string): number;
+}

package/lib/model/helpers/modelHelper.js

@@ -0,0 +1,41 @@
+export class ModelHelper {
+    static getSum(items) {
+        return items.reduce((acc, item) => acc + item, 0);
+    }
+    static getMinAndMaxOfIntervalData(data, dataSource, chart) {
+        let min = data[dataSource][0][chart.data.valueField1.name];
+        let max = data[dataSource][0][chart.data.valueField1.name];
+        const chartData = data[dataSource];
+        const valueField1 = chart.data.valueField1.name;
+        const valueField2 = chart.data.valueField2.name;
+        chartData.forEach(dataRow => {
+            if (dataRow[valueField1] > max)
+                max = dataRow[valueField1];
+            if (dataRow[valueField1] < min)
+                min = dataRow[valueField1];
+            if (dataRow[valueField2] > max)
+                max = dataRow[valueField2];
+            if (dataRow[valueField2] < min)
+                min = dataRow[valueField2];
+        });
+        return [min, max];
+    }
+    static getUniqueValues(values) {
+        const uniqueValues = values.filter((keyValue, index, self) => self.indexOf(keyValue) === index);
+        return uniqueValues;
+    }
+    static getStringScore(word) {
+        // lower case letter width ~ 0.74 from upper case width.
+        // Number width == lower case letter width
+        let score = 0;
+        const upperLetterScore = 1;
+        const lowerLetterScore = 0.74;
+        for (let i = 0; i < word.length; i++) {
+            if (word[i].toUpperCase() === word[i] && parseFloat(word[i]).toString() !== word[i])
+                score += upperLetterScore;
+            else
+                score += lowerLetterScore;
+        }
+        return score;
+    }
+}

package/lib/model/helpers/unitsFromConfigReader.d.ts

@@ -0,0 +1,2 @@
+import { UnitsFromConfig } from "../model";
+export declare function getPxPercentUnitByValue(value: number | string): UnitsFromConfig;

package/lib/model/helpers/unitsFromConfigReader.js

@@ -0,0 +1,7 @@
+import { UnitsReader } from "./unitsReader";
+export function getPxPercentUnitByValue(value) {
+    const unitsReader = new UnitsReader();
+    const defaultUnit = "px";
+    const units = ["%", "px"];
+    return unitsReader.getUnitByValue(value, defaultUnit, units);
+}

package/lib/model/helpers/unitsReader.d.ts

@@ -0,0 +1,5 @@
+import { UnitsFromConfig } from "../model";
+export declare class UnitsReader {
+    getUnitByValue<T extends string = UnitsFromConfig>(value: string | number, defaultUnit: T, units: T[]): T;
+    private getLastUnitFromString;
+}

package/lib/model/helpers/unitsReader.js

@@ -0,0 +1,15 @@
+export class UnitsReader {
+    getUnitByValue(value, defaultUnit, units) {
+        if (typeof value !== "string")
+            return defaultUnit;
+        return this.getLastUnitFromString(value, units) || defaultUnit;
+    }
+    getLastUnitFromString(value, units) {
+        let resultUnit = null;
+        units.forEach(unit => {
+            if (value.endsWith(unit))
+                resultUnit = unit;
+        });
+        return resultUnit;
+    }
+}

package/lib/model/marginModel.d.ts

@@ -6,13 +6,12 @@ import { CanvasModel } from "./modelInstance/canvasModel/canvasModel";
 export declare const AXIS_HORIZONTAL_LABEL_PADDING = 15;
 export declare const AXIS_VERTICAL_LABEL_PADDING = 10;
 export declare class MarginModel {
+    private static twoDimLegendModel;
     static initMargin(designerConfig: DesignerConfig, config: MdtChartsConfig, otherComponents: OtherCommonComponents, data: MdtChartsDataSource, modelInstance: ModelInstance): void;
     static recalcMarginByVerticalAxisLabel(modelInstance: ModelInstance, config: MdtChartsConfig, designerConfig: DesignerConfig, dataScope: DataScope): void;
+    static appendToGlobalMarginValuesLegendMargin(canvasModel: CanvasModel, position: Orient, legendBlockModel: LegendBlockModel): void;
     private static getHorizontalMarginByAxisLabels;
     private static recalcVerticalMarginByAxisLabelHeight;
     private static recalcHorizontalMarginByAxisLabelWidth;
-    private static recalcMarginWithLegend;
-    private static getLegendItemsContent;
-    static appendToGlobalMarginValuesLegendMargin(canvasModel: CanvasModel, position: Orient, legendBlockModel: LegendBlockModel): void;
     private static recalcMarginByTitle;
 }

package/lib/model/marginModel.js

@@ -1,18 +1,18 @@
 import { AxisModel } from "./featuresModel/axisModel";
 import { DataManagerModel } from "./dataManagerModel/dataManagerModel";
-import { LegendModel } from "./featuresModel/legendModel/legendModel";
 import { AxisType } from "./modelBuilder";
 import { TwoDimensionalModel } from "./notations/twoDimensionalModel";
 import { keyAxisLabelHorizontalLog, keyAxisLabelVerticalLog } from "./featuresModel/scaleModel/scaleAxisRecalcer";
+import { TwoDimLegendModel } from "./featuresModel/legendModel/twoDimLegendModel";
 export const AXIS_HORIZONTAL_LABEL_PADDING = 15;
 export const AXIS_VERTICAL_LABEL_PADDING = 10;
 export class MarginModel {
     static initMargin(designerConfig, config, otherComponents, data, modelInstance) {
         const canvasModel = modelInstance.canvasModel;
         canvasModel.initMargin(Object.assign({}, designerConfig.canvas.chartBlockMargin));
-        this.recalcMarginWithLegend(modelInstance, config, designerConfig.canvas.legendBlock.maxWidth, otherComponents.legendBlock, data);
         this.recalcMarginByTitle(canvasModel, otherComponents.titleBlock);
-        if (config.options.type === '2d' || config.options.type === 'interval') {
+        if (config.options.type === '2d') {
+            this.twoDimLegendModel.recalcMarginWith2DLegend(modelInstance, otherComponents.legendBlock);
             const labelSize = this.getHorizontalMarginByAxisLabels(designerConfig.canvas.axisLabel.maxSize.main, config.options.axis, data, config.options);
             this.recalcVerticalMarginByAxisLabelHeight(labelSize, canvasModel, config.options.orientation, config.options.axis);
             // Если встроенный лейбл показывает ключи, то лейблы оси ключей не показываются
@@ -35,6 +35,13 @@ export class MarginModel {
             }
         }
     }
+    static appendToGlobalMarginValuesLegendMargin(canvasModel, position, legendBlockModel) {
+        const legendCoordinate = legendBlockModel.coordinate;
+        if (position === 'left' || position === 'right')
+            canvasModel.increaseMarginSide(position, legendCoordinate[position].margin.left + legendCoordinate[position].margin.right);
+        else
+            canvasModel.increaseMarginSide(position, legendCoordinate[position].margin.top + legendCoordinate[position].margin.bottom);
+    }
     static getHorizontalMarginByAxisLabels(labelsMaxWidth, axis, data, options) {
         const keyAxisOrient = AxisModel.getAxisOrient(AxisType.Key, options.orientation, axis.key.position);
         let labelsTexts;
@@ -66,45 +73,8 @@ export class MarginModel {
             canvasModel.increaseMarginSide(valueAxisOrient, labelSize.width + AXIS_VERTICAL_LABEL_PADDING);
         }
     }
-    static recalcMarginWithLegend(modelInstance, config, legendMaxWidth, legendBlockModel, data) {
-        if (config.options.type === "polar") {
-            return;
-        }
-        const canvasModel = modelInstance.canvasModel;
-        const legendPosition = LegendModel.getLegendModel(config.options.type, config.options.legend.show, modelInstance.canvasModel).position;
-        modelInstance.canvasModel.legendCanvas.setPosition(legendPosition);
-        if (legendPosition !== 'off') {
-            const legendItemsContent = this.getLegendItemsContent(config.options, data);
-            const legendSize = LegendModel.getLegendSize(config.options.type, legendPosition, legendItemsContent, legendMaxWidth, canvasModel.getBlockSize(), legendBlockModel);
-            canvasModel.increaseMarginSide(legendPosition, legendSize);
-            if (legendSize !== 0)
-                this.appendToGlobalMarginValuesLegendMargin(canvasModel, legendPosition, legendBlockModel);
-            legendBlockModel.coordinate[legendPosition].size = legendSize;
-        }
-    }
-    static getLegendItemsContent(options, data) {
-        if (options.type === '2d') {
-            let texts = [];
-            options.charts.forEach(chart => {
-                texts = texts.concat(chart.data.valueFields.map(field => field.title));
-            });
-            return texts;
-        }
-        else if (options.type === 'polar') {
-            return DataManagerModel.getDataValuesByKeyField(data, options.data.dataSource, options.data.keyField.name);
-        }
-        else if (options.type === 'interval') {
-            return [options.chart.data.valueField1.name];
-        }
-    }
-    static appendToGlobalMarginValuesLegendMargin(canvasModel, position, legendBlockModel) {
-        const legendCoordinate = legendBlockModel.coordinate;
-        if (position === 'left' || position === 'right')
-            canvasModel.increaseMarginSide(position, legendCoordinate[position].margin.left + legendCoordinate[position].margin.right);
-        else
-            canvasModel.increaseMarginSide(position, legendCoordinate[position].margin.top + legendCoordinate[position].margin.bottom);
-    }
     static recalcMarginByTitle(canvasModel, titleBlockModel) {
         canvasModel.increaseMarginSide("top", titleBlockModel.margin.top + titleBlockModel.size + titleBlockModel.margin.bottom);
     }
 }
+MarginModel.twoDimLegendModel = new TwoDimLegendModel();

package/lib/model/model.d.ts

@@ -9,6 +9,7 @@ export declare type EmbeddedLabelTypeModel = "none" | "key" | "value";
 export declare type DataOptions = {
     [option: string]: any;
 };
+export declare type UnitsFromConfig = "%" | "px";
 export interface Model<O = TwoDimensionalOptionsModel | PolarOptionsModel | IntervalOptionsModel> {
     blockCanvas: BlockCanvas;
     chartBlock: ChartBlockModel;
@@ -148,7 +149,7 @@ export interface DonutAggregatorContent {
     value: string | number;
     title: string;
 }
-export declare type DonutThicknessUnit = "px" | "%";
+export declare type DonutThicknessUnit = UnitsFromConfig;
 export interface DonutThicknessOptions {
     min: number;
     max: number;
@@ -223,7 +224,6 @@ interface ComponentBlockModel {
 }
 export interface LegendBlockModel {
     coordinate: LegendCoordinate;
-    standartTooltip: boolean;
 }
 export interface LegendCoordinate {
     top: LegendCanvasCoordinate;

package/lib/model/modelBuilder.js

@@ -67,7 +67,7 @@ export function assembleModel(config, data, designerConfig) {
             dataSettings: null
         };
     resetFalsyValues(data, config.options.data.keyField.name);
-    const otherComponents = OtherComponentsModel.getOtherComponentsModel({ elementsOptions: designerConfig.elementsOptions, notation: config.options.type, title: config.options.title }, modelInstance);
+    const otherComponents = OtherComponentsModel.getOtherComponentsModel({ elementsOptions: designerConfig.elementsOptions, title: config.options.title }, modelInstance);
     MarginModel.initMargin(designerConfig, config, otherComponents, data, modelInstance);
     DataManagerModel.initDataScope(config, data, designerConfig, otherComponents.legendBlock, modelInstance);
     const preparedData = DataManagerModel.getPreparedData(data, modelInstance.dataModel.getAllowableKeys(), config);

package/lib/model/notations/polar/donut/donutThicknessService.d.ts

@@ -4,6 +4,4 @@ export declare class DonutThicknessService {
     private defaultUnit;
     getUnit(settingsFromConfig: MdtChartsDonutThicknessOptions): DonutThicknessUnit;
     valueToNumber(value: string | number): number;
-    private getUnitByValue;
-    private getLastUnitFromString;
 }

package/lib/model/notations/polar/donut/donutThicknessService.js

@@ -1,12 +1,13 @@
+import { getPxPercentUnitByValue } from "../../../helpers/unitsFromConfigReader";
 export class DonutThicknessService {
     constructor() {
         this.defaultUnit = "px";
     }
     getUnit(settingsFromConfig) {
         if (settingsFromConfig.value)
-            return this.getUnitByValue(settingsFromConfig.value);
-        const minUnit = this.getUnitByValue(settingsFromConfig.min);
-        const maxUnit = this.getUnitByValue(settingsFromConfig.max);
+            return getPxPercentUnitByValue(settingsFromConfig.value);
+        const minUnit = getPxPercentUnitByValue(settingsFromConfig.min);
+        const maxUnit = getPxPercentUnitByValue(settingsFromConfig.max);
         return minUnit === maxUnit ? minUnit : this.defaultUnit;
     }
     valueToNumber(value) {
@@ -14,17 +15,4 @@ export class DonutThicknessService {
             return value;
         return parseInt(value);
     }
-    getUnitByValue(value) {
-        if (typeof value !== "string")
-            return this.defaultUnit;
-        return this.getLastUnitFromString(value);
-    }
-    getLastUnitFromString(value) {
-        let resultUnit = this.defaultUnit;
-        ["%", "px"].forEach(unit => {
-            if (value.endsWith(unit))
-                resultUnit = unit;
-        });
-        return resultUnit;
-    }
 }

package/lib/style/charts-main.css

@@ -62,7 +62,7 @@
     /* will-change: opacity;      */
 }
 .legend-block-column .legend-item:not(:first-of-type) {
-    margin-top: 15px;
+    margin-top: 10px;
 }
 .legend-item-inline {
     white-space: nowrap;
@@ -73,13 +73,15 @@
     margin-left: 20px;
 }
 .legend-wrapper-with-wrap .legend-item-inline {
-    margin: 5px;
+    margin: 2px;
 }
 .legend-item-row {
     display: flex;
 }
 .legend-item-row > span {
     display: block;
+    overflow: hidden;
+    text-overflow: ellipsis;
 }
 
 .legend-label {
@@ -201,7 +203,6 @@
     line-height: 1;
 }
 .aggregator-value {
-    margin-top: 0.5em;
     pointer-events: auto;
 }
 .aggregator-name {
@@ -221,7 +222,7 @@
 /* Record overflow */
 .record-overflow-alert {
     background-color: #FFFFFF;;
-    padding: 5px 10px 5px;
+    padding: 2px 8px;
     border: 1px solid #0F6698;
     box-sizing: border-box;
     border-radius: 100px;

package/lib/style/charts-main.less

@@ -62,7 +62,7 @@
     /* will-change: opacity;      */
 }
 .legend-block-column .legend-item:not(:first-of-type) {
-    margin-top: 15px;
+    margin-top: 10px;
 }
 .legend-item-inline {
     white-space: nowrap;
@@ -73,13 +73,15 @@
     margin-left: 20px;
 }
 .legend-wrapper-with-wrap .legend-item-inline {
-    margin: 5px;
+    margin: 2px;
 }
 .legend-item-row {
     display: flex;
 }
 .legend-item-row > span {
     display: block;
+    overflow: hidden;
+    text-overflow: ellipsis;
 }
 
 .legend-label {
@@ -201,7 +203,6 @@
     line-height: 1;
 }
 .aggregator-value {
-    margin-top: 0.5em;
     pointer-events: auto;
 }
 .aggregator-name {
@@ -221,7 +222,7 @@
 /* Record overflow */
 .record-overflow-alert {
     background-color: #FFFFFF;;
-    padding: 5px 10px 5px;
+    padding: 2px 8px;
     border: 1px solid #0F6698;
     box-sizing: border-box;
     border-radius: 100px;

package/package.json

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