mdt-charts 1.12.5 → 1.12.9

package/lib/engine/features/axis/axis.d.ts

@@ -1,4 +1,4 @@
-import { IAxisModel, IScaleModel } from "../../../model/model";
+import { AxisModelOptions, IAxisModel, IScaleModel } from "../../../model/model";
 import { Block } from "../../block/block";
 import { Scales } from "../scale/scale";
 import { Size } from '../../../config/config';
@@ -6,6 +6,8 @@ export declare class Axis {
     static axesClass: string;
     static render(block: Block, scales: Scales, scaleModel: IScaleModel, axisModel: IAxisModel, blockSize: Size): void;
     static update(block: Block, scales: Scales, scalesOptions: IScaleModel, axisModel: IAxisModel, blockSize: Size, keyDomainsEquality: boolean): void;
+    static raiseKeyAxis(block: Block, axisOptions: AxisModelOptions): void;
+    private static findAxis;
     private static renderAxis;
     private static updateValueAxis;
     private static updateKeyAxis;

package/lib/engine/features/axis/axis.js

@@ -20,6 +20,14 @@ export class Axis {
         if (axisModel.key.visibility)
             this.updateKeyAxis(block, scales.key, scalesOptions.key, axisModel.key, blockSize, keyDomainsEquality);
     }
+    static raiseKeyAxis(block, axisOptions) {
+        const axisElement = this.findAxis(block, axisOptions.cssClass);
+        axisElement.raise();
+    }
+    static findAxis(block, axisCssClass) {
+        return block.getSvg()
+            .select(`g.${axisCssClass}`);
+    }
     static renderAxis(block, scale, scaleOptions, axisOptions, blockSize) {
         const axisGenerator = AxisHelper.getBaseAxisGenerator(axisOptions, scale, scaleOptions);
         if (axisOptions.type === 'value' && (scaleOptions.type === 'linear' || scaleOptions.type === 'datetime'))

package/lib/engine/features/gridLine/gidLineHelper.d.ts

@@ -1,3 +1,4 @@
+import { AxisScale } from "d3-axis";
 import { Size } from "../../../config/config";
 import { AxisModelOptions, BlockMargin } from "../../../model/model";
 export declare type GridLineType = 'key' | 'value';
@@ -10,4 +11,5 @@ export interface GridLineAttributes {
 export declare class GridLineHelper {
     static getGridLineLength(gridLineType: GridLineType, keyAxis: AxisModelOptions, valueAxis: AxisModelOptions, blockSize: Size, margin: BlockMargin): number;
     static getLineAttributes(axis: AxisModelOptions, lineLength: number): GridLineAttributes;
+    static getKeyLineAttributes(axis: AxisModelOptions, scaleValue: AxisScale<any>): GridLineAttributes;
 }

package/lib/engine/features/gridLine/gidLineHelper.js

@@ -1,3 +1,4 @@
+import { max, min } from "d3-array";
 export class GridLineHelper {
     static getGridLineLength(gridLineType, keyAxis, valueAxis, blockSize, margin) {
         let axis;
@@ -27,4 +28,25 @@ export class GridLineHelper {
             attributes.y2 = lineLength;
         return attributes;
     }
+    static getKeyLineAttributes(axis, scaleValue) {
+        const attributes = {
+            x1: 0,
+            y1: 0,
+            x2: 0,
+            y2: 0
+        };
+        const scaledStart = scaleValue(scaleValue.domain()[0]);
+        const scaledEnd = scaleValue(scaleValue.domain()[1]);
+        const minCoord = min([scaledStart, scaledEnd]) - scaleValue(0);
+        const maxCoord = max([scaledStart, scaledEnd]) - scaleValue(0);
+        if (axis.orient === 'left' || axis.orient === 'right') {
+            attributes.x1 = minCoord;
+            attributes.x2 = maxCoord;
+        }
+        else {
+            attributes.y1 = minCoord;
+            attributes.y2 = maxCoord;
+        }
+        return attributes;
+    }
 }

package/lib/engine/features/gridLine/gridLine.d.ts

@@ -1,11 +1,13 @@
 import { Size } from "../../../config/config";
-import { BlockMargin, GridLineFlag, IAxisModel, ScaleKeyModel } from "../../../model/model";
+import { BlockMargin, GridLineFlag, IAxisModel } from "../../../model/model";
 import { Block } from "../../block/block";
+import { Scales } from "../scale/scale";
 export declare class GridLine {
     private static readonly gridLineClass;
-    static render(block: Block, gridLineFlag: GridLineFlag, axes: IAxisModel, blockSize: Size, margin: BlockMargin, scaleKey: ScaleKeyModel): void;
-    static update(block: Block, gridLineFlag: GridLineFlag, axes: IAxisModel, blockSize: Size, margin: BlockMargin, scaleKey: ScaleKeyModel): void;
+    static render(block: Block, gridLineFlag: GridLineFlag, axes: IAxisModel, blockSize: Size, margin: BlockMargin, scales: Scales): void;
+    static update(block: Block, gridLineFlag: GridLineFlag, axes: IAxisModel, blockSize: Size, margin: BlockMargin, scales: Scales): void;
     private static renderLine;
     private static clear;
     private static removeGridLinesOnAxes;
+    private static rmGridLineOnTick;
 }

package/lib/engine/features/gridLine/gridLine.js

@@ -1,24 +1,20 @@
 import { GridLineHelper } from "./gidLineHelper";
 export class GridLine {
-    static render(block, gridLineFlag, axes, blockSize, margin, scaleKey) {
+    static render(block, gridLineFlag, axes, blockSize, margin, scales) {
         if (gridLineFlag.value) {
             const lineLength = GridLineHelper.getGridLineLength('value', axes.key, axes.value, blockSize, margin);
             const lineAttributes = GridLineHelper.getLineAttributes(axes.value, lineLength);
             this.renderLine(block, axes.value, lineAttributes);
         }
         if (gridLineFlag.key) {
-            const lineLength = GridLineHelper.getGridLineLength('key', axes.key, axes.value, blockSize, margin);
-            const lineAttributes = GridLineHelper.getLineAttributes(axes.key, lineLength);
+            const lineAttributes = GridLineHelper.getKeyLineAttributes(axes.key, scales.value);
             this.renderLine(block, axes.key, lineAttributes);
         }
-        if (scaleKey.type === 'point' && (gridLineFlag.key || gridLineFlag.value))
-            this.removeGridLinesOnAxes(block, axes.key, axes.value, false);
-        else if (gridLineFlag.key || gridLineFlag.value)
-            this.removeGridLinesOnAxes(block, axes.key, axes.value, true);
+        this.removeGridLinesOnAxes(block, axes.key, axes.value, true);
     }
-    static update(block, gridLineFlag, axes, blockSize, margin, scaleKey) {
+    static update(block, gridLineFlag, axes, blockSize, margin, scales) {
         this.clear(block, axes.key.cssClass, axes.value.cssClass);
-        this.render(block, gridLineFlag, axes, blockSize, margin, scaleKey);
+        this.render(block, gridLineFlag, axes, blockSize, margin, scales);
     }
     static renderLine(block, axis, lineAttributes) {
         block
@@ -51,17 +47,20 @@ export class GridLine {
             tickOnValueAxisSelector = ':last-of-type';
         if (keyAxis.orient === 'bottom' || keyAxis.orient === 'right')
             tickOnKeyAxisSelector = ':last-of-type';
-        block.getSvg()
+        const tickOnKey = block.getSvg()
             .select(`.${valueAxis.cssClass}`)
-            .select(`g.tick${tickOnKeyAxisSelector}`)
+            .select(`g.tick${tickOnKeyAxisSelector}`);
+        const tickOnValue = block.getSvg()
+            .select(`.${keyAxis.cssClass}`)
+            .select(`g.tick${tickOnValueAxisSelector}`);
+        // this.rmGridLineOnTick(tickOnKey);
+        // if (!excludeKey)
+        //     this.rmGridLineOnTick(tickOnValue);
+    }
+    static rmGridLineOnTick(tick) {
+        tick
             .select(`.${this.gridLineClass}`)
             .remove();
-        if (!excludeKey)
-            block.getSvg()
-                .select(`.${keyAxis.cssClass}`)
-                .select(`g.tick${tickOnValueAxisSelector}`)
-                .select(`.${this.gridLineClass}`)
-                .remove();
     }
 }
 GridLine.gridLineClass = 'grid-line';

package/lib/engine/intervalNotation/intervalManager.js

@@ -11,7 +11,7 @@ export class IntervalManager {
         block.renderSvg(model.blockCanvas.size);
         const scales = Scale.getScales(options.scale.key, options.scale.value, options.chartSettings.bar);
         Axis.render(block, scales, options.scale, options.axis, model.blockCanvas.size);
-        GridLine.render(block, options.additionalElements.gridLine.flag, options.axis, model.blockCanvas.size, model.chartBlock.margin, options.scale.key);
+        GridLine.render(block, options.additionalElements.gridLine.flag, options.axis, model.blockCanvas.size, model.chartBlock.margin, scales);
         this.renderCharts(block, options.charts, scales, data, options.data, model.chartBlock.margin, options.axis.key.orient, options.chartSettings);
         Title.render(block, options.title, model.otherComponents.titleBlock, model.blockCanvas.size);
         Legend.render(block, data, options, model);

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/engine/twoDimensionalNotation/twoDimensionalManager.js

@@ -20,8 +20,9 @@ export class TwoDimensionalManager {
         engine.block.scales = scales;
         engine.block.renderSvg(model.blockCanvas.size);
         Axis.render(engine.block, scales, options.scale, options.axis, model.blockCanvas.size);
-        GridLine.render(engine.block, options.additionalElements.gridLine.flag, options.axis, model.blockCanvas.size, model.chartBlock.margin, options.scale.key);
+        GridLine.render(engine.block, options.additionalElements.gridLine.flag, options.axis, model.blockCanvas.size, model.chartBlock.margin, scales);
         this.renderCharts(engine.block, options.charts, scales, engine.data, options.data, model.chartBlock.margin, options.axis.key.orient, options.chartSettings.bar, model.blockCanvas.size);
+        Axis.raiseKeyAxis(engine.block, options.axis.key);
         engine.block.filterEventManager.registerEventFor2D(scales.key, model.chartBlock.margin, model.blockCanvas.size, options);
         engine.block.filterEventManager.event2DUpdate(options);
         Title.render(engine.block, options.title, model.otherComponents.titleBlock, model.blockCanvas.size);
@@ -49,7 +50,7 @@ export class TwoDimensionalManager {
         const keyDomainEquality = Helper.checkDomainsEquality(block.scales.key.domain(), scales.key.domain());
         block.scales = scales;
         Axis.update(block, scales, options.scale, options.axis, model.blockCanvas.size, keyDomainEquality);
-        GridLine.update(block, options.additionalElements.gridLine.flag, options.axis, model.blockCanvas.size, model.chartBlock.margin, options.scale.key);
+        GridLine.update(block, options.additionalElements.gridLine.flag, options.axis, model.blockCanvas.size, model.chartBlock.margin, scales);
         const promises = this.updateCharts(block, options.charts, scales, data, model.options.data, model.chartBlock.margin, options.axis.key.orient, model.blockCanvas.size, options.chartSettings.bar);
         Promise.all(promises)
             .then(() => {

package/lib/model/featuresModel/axisModel.js

@@ -111,14 +111,17 @@ 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);
         }
-        console.log(translateX, translateY);
         return {
             translateX,
             translateY

package/lib/model/featuresModel/scaleModel/scaleAxisRecalcer.d.ts

@@ -0,0 +1,20 @@
+import { ScaleLinear, ScaleTime } from "d3-scale";
+import { ChartOrientation, DiscreteAxisOptions } from "../../../config/config";
+import { ScaleValueModel } from "../../model";
+import { CanvasModel } from "../../modelInstance/canvasModel/canvasModel";
+export declare const keyAxisLabelVerticalLog = "keyAxisLabel_vertical_margin_log";
+export declare const keyAxisLabelHorizontalLog = "keyAxisLabel_horizontal_margin_log";
+interface ScaleInfo {
+    scale: ScaleValueModel;
+    scaleFn: ScaleLinear<number, number, never> | ScaleTime<number, number, never>;
+}
+/**
+ * Предназначен для получения нового scaleValue и уменьшения globalMargin, если ось ключей находится где-то внутри chartBlock, а не на его границе
+ */
+export declare class ScaleAxisRecalcer {
+    private generateScaleLinear;
+    constructor(generateScaleLinear: () => ScaleValueModel);
+    recalculateMargin(canvasModel: CanvasModel, chartOrientation: ChartOrientation, keyAxis: DiscreteAxisOptions): void;
+    getScaleValue(): ScaleInfo;
+}
+export {};

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

@@ -0,0 +1,31 @@
+import { Scale } from "../../../engine/features/scale/scale";
+export const keyAxisLabelVerticalLog = "keyAxisLabel_vertical_margin_log";
+export const keyAxisLabelHorizontalLog = "keyAxisLabel_horizontal_margin_log";
+/**
+ * Предназначен для получения нового scaleValue и уменьшения globalMargin, если ось ключей находится где-то внутри chartBlock, а не на его границе
+ */
+export class ScaleAxisRecalcer {
+    constructor(generateScaleLinear) {
+        this.generateScaleLinear = generateScaleLinear;
+    }
+    recalculateMargin(canvasModel, chartOrientation, keyAxis) {
+        const scaleValue = this.generateScaleLinear();
+        //TODO: rm import from engine
+        const scaleValueFn = Scale.getScaleValue(scaleValue);
+        const coordinateOnChartBlock = (keyAxis.position === "start"
+            ? scaleValueFn(0)
+            : (chartOrientation === "vertical"
+                ? canvasModel.getChartBlockHeight()
+                : canvasModel.getChartBlockWidth()) - scaleValueFn(0));
+        const key = chartOrientation === "vertical" ? keyAxisLabelVerticalLog : keyAxisLabelHorizontalLog;
+        const logInfo = canvasModel.marginService.getDataByKey(key);
+        canvasModel.decreaseMarginSide(logInfo.side, logInfo.byValue - coordinateOnChartBlock < 0 ? logInfo.byValue : coordinateOnChartBlock);
+    }
+    getScaleValue() {
+        const scale = this.generateScaleLinear();
+        return {
+            scale,
+            scaleFn: Scale.getScaleValue(scale)
+        };
+    }
+}

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

@@ -0,0 +1,19 @@
+import { ScaleKeyModel, ScaleKeyType, ScaleValueModel, ScaleValueType } from "../../model";
+import { AxisPosition, NumberDomain, IntervalChart, MdtChartsTwoDimensionalChart, MdtChartsTwoDimensionalOptions, ChartOrientation, MdtChartsDataSource, MdtChartsDataRow } from "../../../config/config";
+import { CanvasModel } from "../../modelInstance/canvasModel/canvasModel";
+export declare enum ScaleType {
+    Key = 0,
+    Value = 1
+}
+export declare class ScaleModel {
+    static getScaleKey(allowableKeys: string[], orient: ChartOrientation, canvasModel: CanvasModel, charts: MdtChartsTwoDimensionalChart[], barCharts: MdtChartsTwoDimensionalChart[]): ScaleKeyModel;
+    static getScaleLinear(options: MdtChartsTwoDimensionalOptions, data: MdtChartsDataSource, canvasModel: CanvasModel): ScaleValueModel;
+    static getRangePeek(scaleType: ScaleType, chartOrientation: string, canvasModel: CanvasModel): number;
+    static getDateValueDomain(data: MdtChartsDataSource, chart: IntervalChart, keyAxisPosition: AxisPosition, dataSource: string): [Date, Date];
+    static getLinearDomain(configDomain: NumberDomain, data: MdtChartsDataSource, configOptions: MdtChartsTwoDimensionalOptions): [number, number];
+    static getScaleKeyType(charts: MdtChartsTwoDimensionalChart[]): ScaleKeyType;
+    static getScaleValueType(charts: MdtChartsTwoDimensionalChart[] | IntervalChart[]): ScaleValueType;
+    static getElementsAmount(barCharts: MdtChartsTwoDimensionalChart[]): number;
+    static getScaleMaxValue(charts: MdtChartsTwoDimensionalChart[], dataRows: MdtChartsDataRow[]): number;
+    static getScaleMinValue(charts: MdtChartsTwoDimensionalChart[], dataRows: MdtChartsDataRow[]): number;
+}

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

@@ -0,0 +1,118 @@
+import { ModelHelper } from "../../modelHelper";
+export var ScaleType;
+(function (ScaleType) {
+    ScaleType[ScaleType["Key"] = 0] = "Key";
+    ScaleType[ScaleType["Value"] = 1] = "Value";
+})(ScaleType || (ScaleType = {}));
+export class ScaleModel {
+    static getScaleKey(allowableKeys, orient, canvasModel, charts, barCharts) {
+        return {
+            domain: allowableKeys,
+            range: {
+                start: 0,
+                end: ScaleModel.getRangePeek(ScaleType.Key, orient, canvasModel)
+            },
+            type: ScaleModel.getScaleKeyType(charts),
+            elementsAmount: this.getElementsAmount(barCharts)
+        };
+    }
+    static getScaleLinear(options, data, canvasModel) {
+        return {
+            domain: ScaleModel.getLinearDomain(options.axis.value.domain, data, options),
+            range: {
+                start: 0,
+                end: ScaleModel.getRangePeek(ScaleType.Value, options.orientation, canvasModel)
+            },
+            type: ScaleModel.getScaleValueType(options.charts)
+        };
+    }
+    static getRangePeek(scaleType, chartOrientation, canvasModel) {
+        if (chartOrientation === 'vertical')
+            return scaleType === ScaleType.Key
+                ? canvasModel.getChartBlockWidth()
+                : canvasModel.getChartBlockHeight();
+        return scaleType === ScaleType.Key
+            ? canvasModel.getChartBlockHeight()
+            : canvasModel.getChartBlockWidth();
+    }
+    static getDateValueDomain(data, chart, keyAxisPosition, dataSource) {
+        const minMax = ModelHelper.getMinAndMaxOfIntervalData(data, dataSource, chart);
+        let domainPeekMin = minMax[0];
+        let domainPeekMax = minMax[1];
+        if (keyAxisPosition === 'start')
+            return [domainPeekMin, domainPeekMax];
+        return [domainPeekMax, domainPeekMin];
+    }
+    static getLinearDomain(configDomain, data, configOptions) {
+        let domainPeekMin;
+        let domainPeekMax;
+        if (configDomain.start === -1)
+            domainPeekMin = this.getScaleMinValue(configOptions.charts, data[configOptions.data.dataSource]);
+        else
+            domainPeekMin = configDomain.start;
+        if (configDomain.end === -1)
+            domainPeekMax = this.getScaleMaxValue(configOptions.charts, data[configOptions.data.dataSource]);
+        else
+            domainPeekMax = configDomain.end;
+        if (configOptions.axis.key.position === 'start')
+            return [domainPeekMin, domainPeekMax];
+        return [domainPeekMax, domainPeekMin];
+    }
+    static getScaleKeyType(charts) {
+        if (charts.findIndex((chart) => chart.type === 'bar') === -1)
+            return 'point';
+        return 'band';
+    }
+    static getScaleValueType(charts) {
+        if (charts.findIndex((chart) => chart.type === 'gantt') !== -1)
+            return 'datetime';
+        return 'linear';
+    }
+    static getElementsAmount(barCharts) {
+        if (barCharts.length === 0)
+            return 1;
+        let barsAmount = 0;
+        barCharts.forEach(chart => {
+            if (chart.isSegmented)
+                barsAmount += 1; // Если бар сегментированный, то все valueFields являются частями одного бара
+            else
+                barsAmount += chart.data.valueFields.length;
+        });
+        return barsAmount;
+    }
+    static getScaleMaxValue(charts, dataRows) {
+        let max = 0;
+        charts.forEach(chart => {
+            dataRows.forEach(dataRow => {
+                let sumInRow = 0;
+                chart.data.valueFields.forEach(field => {
+                    if (chart.isSegmented && dataRow[field.name] > 0)
+                        sumInRow += dataRow[field.name];
+                    else if (dataRow[field.name] > sumInRow)
+                        sumInRow = dataRow[field.name];
+                });
+                if (max < sumInRow)
+                    max = sumInRow;
+            });
+        });
+        return max;
+    }
+    static getScaleMinValue(charts, dataRows) {
+        let min = 0;
+        charts.forEach(chart => {
+            dataRows.forEach(dataRow => {
+                let sumInRow = 0;
+                chart.data.valueFields.forEach(field => {
+                    if (chart.isSegmented && dataRow[field.name] < 0) {
+                        sumInRow += dataRow[field.name];
+                    }
+                    else if (dataRow[field.name] < sumInRow)
+                        sumInRow = dataRow[field.name];
+                });
+                if (min > sumInRow)
+                    min = sumInRow;
+            });
+        });
+        return min;
+    }
+}

package/lib/model/marginModel.js

@@ -3,6 +3,7 @@ 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";
 export const AXIS_HORIZONTAL_LABEL_PADDING = 15;
 export const AXIS_VERTICAL_LABEL_PADDING = 10;
 export class MarginModel {
@@ -28,8 +29,10 @@ export class MarginModel {
             const axisLabelSize = AxisModel.getLabelSize(designerConfig.canvas.axisLabel.maxSize.main, dataScope.allowableKeys);
             const axisConfig = AxisModel.getKeyAxisLabelPosition(modelInstance.canvasModel, dataScope.allowableKeys.length, config.options.axis.key);
             const marginOrient = config.options.axis.key.position === 'end' ? 'bottom' : 'top';
-            if (axisConfig === 'rotated')
-                modelInstance.canvasModel.setMarginSide(marginOrient, modelInstance.canvasModel.getMarginSide(marginOrient) + (axisLabelSize.width - axisLabelSize.height));
+            if (axisConfig === 'rotated') {
+                modelInstance.canvasModel.decreaseMarginSide(marginOrient, axisLabelSize.height);
+                modelInstance.canvasModel.increaseMarginSide(marginOrient, axisLabelSize.width, keyAxisLabelVerticalLog);
+            }
         }
     }
     static getHorizontalMarginByAxisLabels(labelsMaxWidth, axis, data, options) {
@@ -48,7 +51,7 @@ export class MarginModel {
         const valueAxisOrient = AxisModel.getAxisOrient(AxisType.Value, orientation, axis.value.position);
         if ((keyAxisOrient === 'bottom' || keyAxisOrient === 'top')) {
             if (axis.key.visibility)
-                canvasModel.increaseMarginSide(keyAxisOrient, labelSize.height + AXIS_HORIZONTAL_LABEL_PADDING);
+                canvasModel.increaseMarginSide(keyAxisOrient, labelSize.height + AXIS_HORIZONTAL_LABEL_PADDING, keyAxisLabelVerticalLog);
         }
         else if (axis.value.visibility)
             canvasModel.increaseMarginSide(valueAxisOrient, labelSize.height + AXIS_HORIZONTAL_LABEL_PADDING);
@@ -57,7 +60,7 @@ export class MarginModel {
         const keyAxisOrient = AxisModel.getAxisOrient(AxisType.Key, orientation, axis.key.position);
         const valueAxisOrient = AxisModel.getAxisOrient(AxisType.Value, orientation, axis.value.position);
         if ((keyAxisOrient === 'left' || keyAxisOrient === 'right') && isShow && axis.key.visibility) {
-            canvasModel.increaseMarginSide(keyAxisOrient, labelSize.width + AXIS_VERTICAL_LABEL_PADDING);
+            canvasModel.increaseMarginSide(keyAxisOrient, labelSize.width + AXIS_VERTICAL_LABEL_PADDING, keyAxisLabelHorizontalLog);
         }
         else if ((valueAxisOrient === 'left' || valueAxisOrient === 'right') && axis.value.visibility) {
             canvasModel.increaseMarginSide(valueAxisOrient, labelSize.width + AXIS_VERTICAL_LABEL_PADDING);

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

@@ -1,11 +1,13 @@
 import { Size } from "../../../config/config";
 import { BlockMargin } from "../../model";
 import { LegendCanvasModelInstance } from "./legendCanvasModel";
+import { MarginModelService } from "./marginModelService";
 import { TitleCanvasModel } from "./titleCanvas";
-declare type MarginSide = keyof BlockMargin;
+export declare type MarginSide = keyof BlockMargin;
 export declare class CanvasModel {
     titleCanvas: TitleCanvasModel;
     legendCanvas: LegendCanvasModelInstance;
+    marginService: MarginModelService;
     private blockSize;
     private margin;
     constructor();
@@ -13,12 +15,11 @@ export declare class CanvasModel {
     getMargin(): BlockMargin;
     getMarginSide(side: MarginSide): number;
     setMarginSide(side: MarginSide, size: number): void;
-    increaseMarginSide(side: MarginSide, byValue: number): void;
-    descreaseMarginSide(side: MarginSide, byValue: number): void;
+    increaseMarginSide(side: MarginSide, byValue: number, key?: string): void;
+    decreaseMarginSide(side: MarginSide, byValue: number): void;
     roundMargin(): void;
     initBlockSize(blockSize: Size): void;
     getBlockSize(): Size;
     getChartBlockWidth(): number;
     getChartBlockHeight(): number;
 }
-export {};

package/lib/model/modelInstance/canvasModel/canvasModel.js

@@ -1,9 +1,11 @@
 import { LegendCanvasModelInstance } from "./legendCanvasModel";
+import { MarginModelService } from "./marginModelService";
 import { TitleCanvasModel } from "./titleCanvas";
 export class CanvasModel {
     constructor() {
         this.titleCanvas = new TitleCanvasModel();
         this.legendCanvas = new LegendCanvasModelInstance();
+        this.marginService = new MarginModelService();
     }
     initMargin(margin) {
         this.margin = margin;
@@ -17,10 +19,12 @@ export class CanvasModel {
     setMarginSide(side, size) {
         this.margin[side] = size;
     }
-    increaseMarginSide(side, byValue) {
+    increaseMarginSide(side, byValue, key) {
         this.margin[side] += byValue;
+        if (key)
+            this.marginService.appendLog(key, side, byValue);
     }
-    descreaseMarginSide(side, byValue) {
+    decreaseMarginSide(side, byValue) {
         this.margin[side] -= byValue;
     }
     roundMargin() {

package/lib/model/modelInstance/canvasModel/marginModelService.d.ts

@@ -0,0 +1,11 @@
+import { MarginSide } from "./canvasModel";
+export interface MarginLogData {
+    side: MarginSide;
+    byValue: number;
+}
+export declare class MarginModelService {
+    private log;
+    appendLog(key: string, side: MarginSide, byValue: number): void;
+    getDataByKey(key: string): MarginLogData;
+    private findLogByKey;
+}

package/lib/model/modelInstance/canvasModel/marginModelService.js

@@ -0,0 +1,26 @@
+export class MarginModelService {
+    constructor() {
+        this.log = [];
+    }
+    appendLog(key, side, byValue) {
+        const log = this.findLogByKey(key);
+        if (log) {
+            log.data = { side, byValue };
+            return;
+        }
+        this.log.push({
+            key,
+            data: {
+                side,
+                byValue
+            }
+        });
+    }
+    getDataByKey(key) {
+        var _a;
+        return (_a = this.findLogByKey(key)) === null || _a === void 0 ? void 0 : _a.data;
+    }
+    findLogByKey(key) {
+        return this.log.find(l => l.key === key);
+    }
+}

package/lib/model/notations/intervalModel.js

@@ -2,7 +2,7 @@ import { AxisModel } from "../featuresModel/axisModel";
 import { ChartStyleModelService } from "../chartStyleModel/chartStyleModel";
 import { DataManagerModel } from "../dataManagerModel/dataManagerModel";
 import { AxisType } from "../modelBuilder";
-import { ScaleModel, ScaleType } from "../featuresModel/scaleModel";
+import { ScaleModel, ScaleType } from "../featuresModel/scaleModel/scaleModel";
 import { TwoDimensionalModel } from "./twoDimensionalModel";
 export class IntervalModel {
     static getOptions(config, designerConfig, margin, dataScope, data, modelInstance) {

package/lib/model/notations/twoDimensionalModel.js

@@ -1,27 +1,25 @@
-import { Scale } from "../../engine/features/scale/scale";
 import { ChartStyleModelService } from "../chartStyleModel/chartStyleModel";
 import { TwoDimensionalChartStyleModel } from "../chartStyleModel/TwoDimensionalChartStyleModel";
 import { AxisModel } from "../featuresModel/axisModel";
-import { ScaleModel } from "../featuresModel/scaleModel";
+import { ScaleAxisRecalcer } from "../featuresModel/scaleModel/scaleAxisRecalcer";
+import { ScaleModel } from "../featuresModel/scaleModel/scaleModel";
 export class TwoDimensionalModel {
     static getOptions(options, designerConfig, data, modelInstance) {
         const canvasModel = modelInstance.canvasModel;
-        const scaleKey = ScaleModel.getScaleKey(modelInstance.dataModel.getAllowableKeys(), options.orientation, canvasModel, options.charts, this.getChartsByType(options.charts, 'bar'));
-        const scaleValue = ScaleModel.getScaleLinear(options, data, canvasModel);
-        const chartSettings = this.getChartsSettings(designerConfig.canvas.chartOptions.bar);
-        //TODO: rm import from engine
-        const scaleValueFn = Scale.getScaleValue(scaleValue);
+        const scaleMarginRecalcer = new ScaleAxisRecalcer(() => ScaleModel.getScaleLinear(options, data, canvasModel));
+        scaleMarginRecalcer.recalculateMargin(canvasModel, options.orientation, options.axis.key);
+        const scaleValueInfo = scaleMarginRecalcer.getScaleValue();
         return {
             legend: canvasModel.legendCanvas.getModel(),
             title: options.title,
             selectable: !!options.selectable,
             orient: options.orientation,
             scale: {
-                key: scaleKey,
-                value: scaleValue
+                key: ScaleModel.getScaleKey(modelInstance.dataModel.getAllowableKeys(), options.orientation, canvasModel, options.charts, this.getChartsByType(options.charts, 'bar')),
+                value: scaleValueInfo.scale
             },
             axis: {
-                key: AxisModel.getKeyAxis(options, data, designerConfig.canvas.axisLabel, canvasModel, designerConfig.elementsOptions.tooltip, () => scaleValueFn(0)),
+                key: AxisModel.getKeyAxis(options, data, designerConfig.canvas.axisLabel, canvasModel, designerConfig.elementsOptions.tooltip, () => scaleValueInfo.scaleFn(0)),
                 value: AxisModel.getValueAxis(options.orientation, options.axis.value, designerConfig.canvas.axisLabel, canvasModel)
             },
             type: options.type,
@@ -29,7 +27,7 @@ export class TwoDimensionalModel {
             charts: this.getChartsModel(options.charts, options.orientation, designerConfig.chartStyle),
             additionalElements: this.getAdditionalElements(options),
             tooltip: options.tooltip,
-            chartSettings
+            chartSettings: this.getChartsSettings(designerConfig.canvas.chartOptions.bar)
         };
     }
     static getChartsEmbeddedLabelsFlag(charts, chartOrientation) {

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,7 +73,7 @@
     margin-left: 20px;
 }
 .legend-wrapper-with-wrap .legend-item-inline {
-    margin: 5px;
+    margin: 2px;
 }
 .legend-item-row {
     display: flex;
@@ -221,7 +221,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,7 +73,7 @@
     margin-left: 20px;
 }
 .legend-wrapper-with-wrap .legend-item-inline {
-    margin: 5px;
+    margin: 2px;
 }
 .legend-item-row {
     display: flex;
@@ -221,7 +221,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.5",
+  "version": "1.12.9",
   "description": "",
   "main": "lib/main.js",
   "scripts": {