mdt-charts 1.21.1 → 1.22.0

package/lib/config/config.d.ts

@@ -4,7 +4,7 @@ export declare type AxisPosition = 'start' | 'end';
 export declare type ChartOrientation = 'vertical' | 'horizontal';
 export declare type ChartNotation = '2d' | 'polar' | 'interval';
 export declare type ChartType = 'bar' | 'line' | 'area' | 'donut' | 'gantt';
-export declare type TwoDimensionalChartType = 'line' | 'bar' | 'area';
+export declare type TwoDimensionalChartType = 'line' | 'bar' | 'area' | 'dot';
 export declare type PolarChartType = 'donut';
 export declare type IntervalChartType = 'gantt';
 export declare type EmbeddedLabelType = 'none' | 'key' | 'value';
@@ -186,12 +186,6 @@ export interface IntervalAxis {
 }
 interface DateAxisOptions extends AxisOptions {
 }
-interface ChartSettings {
-    tooltip: Tooltip;
-}
-interface Tooltip {
-    show: boolean;
-}
 interface MdtChartsLineLikeChart {
     markers: MarkersOptions;
     lineStyles?: MdtChartsLineLikeChartStyles;
@@ -217,6 +211,7 @@ export interface AreaStylesBorderLine {
 }
 interface MdtChartsBarLikeChart {
     barStyles?: MdtChartsBarLikeChartStyles;
+    embeddedLabels: EmbeddedLabelType;
 }
 interface MdtChartsBarLikeChartStyles {
     hatch?: MdtChartsBarLikeChartHatchedStyles;
@@ -224,19 +219,30 @@ interface MdtChartsBarLikeChartStyles {
 interface MdtChartsBarLikeChartHatchedStyles {
     on: boolean;
 }
-export interface MdtChartsTwoDimensionalChart extends ChartSettings, MdtChartsLineLikeChart, MdtChartsBarLikeChart {
+interface MdtChartsDotChart {
+    /** @alpha */
+    dotLikeStyles?: MdtChartsDotLikeChartStyles;
+}
+interface MdtChartsDotLikeChartStyles {
+    shape?: MdtChartsDotLikeChartShape;
+}
+interface MdtChartsDotLikeChartShape {
+    type: "line";
+    width?: number;
+}
+export interface MdtChartsTwoDimensionalChart extends MdtChartsLineLikeChart, MdtChartsBarLikeChart, MdtChartsDotChart {
+    /** @alpha dot type has no full support */
     type: TwoDimensionalChartType;
     data: TwoDimensionalChartData;
-    embeddedLabels: EmbeddedLabelType;
     isSegmented: boolean;
     valueLabels?: TwoDimensionalChartValueLabels;
 }
-export interface PolarChart extends ChartSettings {
+export interface PolarChart {
     type: PolarChartType;
     data: PolarChartData;
     aggregator?: MdtChartsDonutAggregator;
 }
-export interface IntervalChart extends ChartSettings {
+export interface IntervalChart {
     type: IntervalChartType;
     data: IntervalChartData;
 }

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

@@ -25,6 +25,6 @@ export class LegendHelperService {
         return "row";
     }
     doesLegendInTopBy2d(legendPosition, chartNotation) {
-        return legendPosition === 'top' && chartNotation === "2d";
+        return (legendPosition === 'top' || legendPosition === 'bottom') && chartNotation === "2d";
     }
 }

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

@@ -34,7 +34,7 @@ class SvgMarkerCreator {
     renderSvg(selection) {
         return selection.append('svg')
             .style("display", "inline-block")
-            .style("height", '10px')
+            .style("height", '8px')
             .classed(Legend.markerClass, true);
     }
 }
@@ -49,7 +49,7 @@ class BarMarkerCreator extends SvgMarkerCreator {
             .append('rect')
             .attr('x', 0)
             .attr('y', 0)
-            .attr('height', 10)
+            .attr('height', this.options.width)
             .attr('width', this.options.width)
             .style('fill', color);
         if (this.options.hatch.on) {

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

@@ -19,7 +19,7 @@ export class Bar {
     }
     render(block, scales, data, keyField, margin, keyAxisOrient, chart, blockSize, barSettings, barsAmounts, isSegmented, firstBarIndex) {
         if (isSegmented)
-            this.renderSegmented(block, scales, data, keyField, margin, keyAxisOrient, chart, barsAmounts, blockSize, firstBarIndex, barSettings);
+            this.renderSegmented(block, scales, data, keyField, margin, keyAxisOrient, chart, barsAmounts, firstBarIndex, barSettings);
         else
             this.renderGrouped(block, scales, data, keyField, margin, keyAxisOrient, chart, barsAmounts, blockSize, firstBarIndex, barSettings);
     }
@@ -53,7 +53,7 @@ export class Bar {
                 .attr('class', this.barItemClass)
                 .style('clip-path', `url(#${block.svg.getClipPathId()})`);
             bars = this.createBarPipeline.execute(bars, chart);
-            const barAttrs = BarHelper.getGroupedBarAttrs(keyAxisOrient, scales, margin, keyField.name, field.name, blockSize, BarHelper.getBarIndex(barsAmounts, chart.index - firstBarIndex) + index, sum(barsAmounts), barSettings);
+            const barAttrs = BarHelper.getGroupedBarAttrs(keyAxisOrient, scales, margin, keyField.name, field.name, BarHelper.getBarIndex(barsAmounts, chart.index - firstBarIndex) + index, sum(barsAmounts), barSettings);
             this.fillBarAttrs(bars, barAttrs);
             DomHelper.setCssClasses(bars, Helper.getCssClassesWithElementIndex(chart.cssClasses, index));
             DomHelper.setChartStyle(bars, chart.style, index, 'fill');
@@ -62,7 +62,7 @@ export class Bar {
                 EmbeddedLabels.render(block, bars, barAttrs, EmbeddedLabelsHelper.getLabelField(chart.embeddedLabels, chart.data.valueFields, keyField, index), chart.embeddedLabels, keyAxisOrient, blockSize, margin, index, chart.cssClasses);
         });
     }
-    renderSegmented(block, scales, data, keyField, margin, keyAxisOrient, chart, barsAmounts, blockSize, firstBarIndex, barSettings) {
+    renderSegmented(block, scales, data, keyField, margin, keyAxisOrient, chart, barsAmounts, firstBarIndex, barSettings) {
         const stackedData = getStackedDataWithOwn(data, chart.data.valueFields.map(field => field.name));
         let groups = block.svg.getChartGroup(chart.index)
             .selectAll(`g.${this.barSegmentGroupClass}${Helper.getCssClassesLine(chart.cssClasses)}`)
@@ -81,7 +81,7 @@ export class Bar {
             .attr('class', this.barItemClass)
             .style('clip-path', `url(#${block.svg.getClipPathId()})`);
         bars = this.createBarPipeline.execute(bars, chart);
-        const barAttrs = BarHelper.getStackedBarAttr(keyAxisOrient, scales, margin, keyField.name, blockSize, BarHelper.getBarIndex(barsAmounts, chart.index) - firstBarIndex, sum(barsAmounts), barSettings);
+        const barAttrs = BarHelper.getStackedBarAttr(keyAxisOrient, scales, margin, keyField.name, BarHelper.getBarIndex(barsAmounts, chart.index) - firstBarIndex, sum(barsAmounts), barSettings);
         this.fillBarAttrs(bars, barAttrs);
         this.setInitialAttrsInfo(bars, keyAxisOrient, barSettings);
         DomHelper.setCssClasses(groups, chart.cssClasses);
@@ -120,7 +120,7 @@ export class Bar {
                 .attr('class', this.barItemClass)
                 .style('clip-path', `url(#${block.svg.getClipPathId()})`);
             newBars = this.createBarPipeline.execute(newBars, chart);
-            const barAttrs = BarHelper.getGroupedBarAttrs(keyAxisOrient, scales, margin, keyField.name, valueField.name, blockSize, BarHelper.getBarIndex(barsAmounts, chart.index) + index - firstBarIndex, sum(barsAmounts), barSettings);
+            const barAttrs = BarHelper.getGroupedBarAttrs(keyAxisOrient, scales, margin, keyField.name, valueField.name, BarHelper.getBarIndex(barsAmounts, chart.index) + index - firstBarIndex, sum(barsAmounts), barSettings);
             const prom = this.fillBarAttrs(bars, barAttrs, block.transitionManager.durations.chartUpdate)
                 .then(() => {
                 bars.style('opacity', null);
@@ -163,7 +163,7 @@ export class Bar {
             .attr('class', this.barItemClass)
             .style('clip-path', `url(#${block.svg.getClipPathId()})`);
         newBars = this.createBarPipeline.execute(newBars, chart);
-        const barAttrs = BarHelper.getStackedBarAttr(keyAxisOrient, scales, margin, keyField.name, blockSize, BarHelper.getBarIndex(barsAmounts, chart.index) - firstBarIndex, sum(barsAmounts), barSettings);
+        const barAttrs = BarHelper.getStackedBarAttr(keyAxisOrient, scales, margin, keyField.name, BarHelper.getBarIndex(barsAmounts, chart.index) - firstBarIndex, sum(barsAmounts), barSettings);
         const prom = this.fillBarAttrs(bars, barAttrs, block.transitionManager.durations.chartUpdate)
             .then(() => {
             this.setInitialAttrsInfo(bars, keyAxisOrient, barSettings);

package/lib/engine/twoDimensionalNotation/bar/barHelper.d.ts

@@ -1,6 +1,7 @@
+import { AxisScale } from "d3-axis";
 import { BarChartSettings, BlockMargin, Orient, TwoDimensionalChartModel } from "../../../model/model";
 import { Scales } from "../../features/scale/scale";
-import { MdtChartsDataRow, Size } from "../../../config/config";
+import { MdtChartsDataRow } from "../../../config/config";
 import { Pipeline } from "../../helpers/pipeline/Pipeline";
 import { BaseType, Selection } from "d3-selection";
 export interface BarAttrsHelper {
@@ -9,9 +10,32 @@ export interface BarAttrsHelper {
     width: (dataRow: MdtChartsDataRow) => number;
     height: (dataRow: MdtChartsDataRow) => number;
 }
+interface BandLikeChartSettingsStore {
+    getBandItemSize(): number;
+    getBandItemPad(bandItemIndex: number): number;
+}
+export declare class DotChartSettingsStore implements BandLikeChartSettingsStore {
+    private readonly canvasConfig;
+    constructor(canvasConfig: {
+        scaleBandWidth: number;
+    });
+    getBandItemSize(): number;
+    getBandItemPad(): number;
+}
+export declare class BarSettingsStore {
+    private readonly modelSettings;
+    private readonly canvasConfig;
+    constructor(modelSettings: BarChartSettings, canvasConfig: {
+        scaleBandWidth: number;
+        barsAmount: number;
+    });
+    getBandItemSize(): number;
+    getBandItemPad(barIndex: number): number;
+    private getBarStep;
+}
 export declare class BarHelper {
-    static getGroupedBarAttrs(keyAxisOrient: Orient, scales: Scales, margin: BlockMargin, keyField: string, valueFieldName: string, blockSize: Size, barIndex: number, barsAmount: number, barSettings: BarChartSettings): BarAttrsHelper;
-    static getStackedBarAttr(keyAxisOrient: Orient, scales: Scales, margin: BlockMargin, keyField: string, blockSize: Size, barIndex: number, barsAmount: number, barSettings: BarChartSettings): BarAttrsHelper;
+    static getGroupedBarAttrs(keyAxisOrient: Orient, scales: Scales, margin: BlockMargin, keyField: string, valueFieldName: string, barIndex: number, barsAmount: number, barSettings: BarChartSettings): BarAttrsHelper;
+    static getStackedBarAttr(keyAxisOrient: Orient, scales: Scales, margin: BlockMargin, keyField: string, barIndex: number, barsAmount: number, barSettings: BarChartSettings): BarAttrsHelper;
     static getBarsInGroupAmount(charts: TwoDimensionalChartModel[]): number[];
     /**
      * Получение индекса бара среди всх графиков и value-филдов. Используется для того, чтобы узнать, какой по счету в группе
@@ -20,8 +44,11 @@ export declare class BarHelper {
      * @param chartIndex
      */
     static getBarIndex(barsAmounts: number[], chartIndex: number): number;
-    private static setBarAttrsByKey;
+    static setBarAttrsByKey(attrs: BarAttrsHelper, keyAxisOrient: Orient, scaleKey: AxisScale<any>, margin: BlockMargin, keyField: string, barIndex: number, settingsStore: BandLikeChartSettingsStore, isSegmented: boolean): void;
     private static setGroupedBarAttrsByValue;
+    static getBandItemValueStretch(scaleValue: AxisScale<any>, valueFieldName: string): (dataRow: MdtChartsDataRow) => number;
+    static setGroupedBandStartCoordinateAttr(attrs: BarAttrsHelper, keyAxisOrient: Orient, scaleValue: AxisScale<any>, margin: BlockMargin, valueFieldName: string): void;
     private static setSegmentedBarAttrsByValue;
 }
 export declare function onBarChartInit(createBarPipeline: Pipeline<Selection<SVGRectElement, any, BaseType, any>, TwoDimensionalChartModel>): void;
+export {};

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

@@ -1,27 +1,56 @@
 import { Scale } from "../../features/scale/scale";
 import { Helper } from "../../helpers/helper";
 import { HatchPatternDef } from "../../block/defs/hatchPattern";
+export class DotChartSettingsStore {
+    constructor(canvasConfig) {
+        this.canvasConfig = canvasConfig;
+    }
+    getBandItemSize() {
+        return this.canvasConfig.scaleBandWidth;
+    }
+    getBandItemPad() {
+        return 0;
+    }
+}
+export class BarSettingsStore {
+    constructor(modelSettings, canvasConfig) {
+        this.modelSettings = modelSettings;
+        this.canvasConfig = canvasConfig;
+    }
+    getBandItemSize() {
+        const barSize = this.getBarStep() > this.modelSettings.maxBarWidth ? this.modelSettings.maxBarWidth : this.getBarStep();
+        return barSize;
+    }
+    getBandItemPad(barIndex) {
+        const barDiff = (this.getBarStep() - this.getBandItemSize()) * this.canvasConfig.barsAmount / 2; // if bar bigger than maxWidth, diff for x coordinate
+        const barPad = this.getBandItemSize() * barIndex + this.modelSettings.barDistance * barIndex + barDiff; // Отступ бара от края. Зависит от количества баров в одной группе и порядке текущего бара
+        return barPad;
+    }
+    getBarStep() {
+        return (this.canvasConfig.scaleBandWidth - this.modelSettings.barDistance * (this.canvasConfig.barsAmount - 1)) / this.canvasConfig.barsAmount; // Space for one bar
+    }
+}
 export class BarHelper {
-    static getGroupedBarAttrs(keyAxisOrient, scales, margin, keyField, valueFieldName, blockSize, barIndex, barsAmount, barSettings) {
+    static getGroupedBarAttrs(keyAxisOrient, scales, margin, keyField, valueFieldName, barIndex, barsAmount, barSettings) {
         const attrs = {
             x: null,
             y: null,
             width: null,
             height: null
         };
-        this.setBarAttrsByKey(attrs, keyAxisOrient, scales.key, margin, keyField, barIndex, barsAmount, barSettings, false);
-        this.setGroupedBarAttrsByValue(attrs, keyAxisOrient, margin, scales.value, valueFieldName, blockSize);
+        this.setBarAttrsByKey(attrs, keyAxisOrient, scales.key, margin, keyField, barIndex, new BarSettingsStore(barSettings, { scaleBandWidth: Scale.getScaleBandWidth(scales.key), barsAmount }), false);
+        this.setGroupedBarAttrsByValue(attrs, keyAxisOrient, margin, scales.value, valueFieldName);
         return attrs;
     }
-    static getStackedBarAttr(keyAxisOrient, scales, margin, keyField, blockSize, barIndex, barsAmount, barSettings) {
+    static getStackedBarAttr(keyAxisOrient, scales, margin, keyField, barIndex, barsAmount, barSettings) {
         const attrs = {
             x: null,
             y: null,
             width: null,
             height: null
         };
-        this.setBarAttrsByKey(attrs, keyAxisOrient, scales.key, margin, keyField, barIndex, barsAmount, barSettings, true);
-        this.setSegmentedBarAttrsByValue(attrs, keyAxisOrient, scales.value, margin, blockSize);
+        this.setBarAttrsByKey(attrs, keyAxisOrient, scales.key, margin, keyField, barIndex, new BarSettingsStore(barSettings, { scaleBandWidth: Scale.getScaleBandWidth(scales.key), barsAmount }), true);
+        this.setSegmentedBarAttrsByValue(attrs, keyAxisOrient, scales.value, margin);
         return attrs;
     }
     static getBarsInGroupAmount(charts) {
@@ -51,39 +80,43 @@ export class BarHelper {
         });
         return index;
     }
-    static setBarAttrsByKey(attrs, keyAxisOrient, scaleKey, margin, keyField, barIndex, barsAmount, barSettings, isSegmented) {
-        const barStep = (Scale.getScaleBandWidth(scaleKey) - barSettings.barDistance * (barsAmount - 1)) / barsAmount; // Space for one bar
-        const barSize = barStep > barSettings.maxBarWidth ? barSettings.maxBarWidth : barStep;
-        const barDiff = (barStep - barSize) * barsAmount / 2; // if bar bigger than maxWidth, diff for x coordinate
-        const barPad = barSize * barIndex + barSettings.barDistance * barIndex + barDiff; // Отступ бара от края. Зависит от количества баров в одной группе и порядке текущего бара
+    static setBarAttrsByKey(attrs, keyAxisOrient, scaleKey, margin, keyField, barIndex, settingsStore, isSegmented) {
         if (keyAxisOrient === 'top' || keyAxisOrient === 'bottom') {
-            attrs.x = d => scaleKey(Helper.getKeyFieldValue(d, keyField, isSegmented)) + margin.left + barPad;
-            attrs.width = d => barSize;
+            attrs.x = d => scaleKey(Helper.getKeyFieldValue(d, keyField, isSegmented)) + margin.left + settingsStore.getBandItemPad(barIndex);
+            attrs.width = d => settingsStore.getBandItemSize();
         }
         if (keyAxisOrient === 'left' || keyAxisOrient === 'right') {
-            attrs.y = d => scaleKey(Helper.getKeyFieldValue(d, keyField, isSegmented)) + margin.top + barPad;
-            attrs.height = d => barSize;
+            attrs.y = d => scaleKey(Helper.getKeyFieldValue(d, keyField, isSegmented)) + margin.top + settingsStore.getBandItemPad(barIndex);
+            attrs.height = d => settingsStore.getBandItemSize();
+        }
+    }
+    static setGroupedBarAttrsByValue(attrs, keyAxisOrient, margin, scaleValue, valueFieldName) {
+        this.setGroupedBandStartCoordinateAttr(attrs, keyAxisOrient, scaleValue, margin, valueFieldName);
+        if (keyAxisOrient === 'top' || keyAxisOrient === 'bottom') {
+            attrs.height = this.getBandItemValueStretch(scaleValue, valueFieldName);
         }
+        if (keyAxisOrient === 'left' || keyAxisOrient === 'right') {
+            attrs.width = this.getBandItemValueStretch(scaleValue, valueFieldName);
+        }
+    }
+    static getBandItemValueStretch(scaleValue, valueFieldName) {
+        return d => Math.abs(scaleValue(d[valueFieldName]) - scaleValue(0));
     }
-    static setGroupedBarAttrsByValue(attrs, keyAxisOrient, margin, scaleValue, valueFieldName, blockSize) {
+    static setGroupedBandStartCoordinateAttr(attrs, keyAxisOrient, scaleValue, margin, valueFieldName) {
         if (keyAxisOrient === 'top') {
             attrs.y = d => scaleValue(Math.min(d[valueFieldName], 0)) + margin.top;
-            attrs.height = d => Math.abs(scaleValue(d[valueFieldName]) - scaleValue(0));
         }
         if (keyAxisOrient === 'bottom') {
             attrs.y = d => scaleValue(Math.max(d[valueFieldName], 0)) + margin.top;
-            attrs.height = d => Math.abs(scaleValue(d[valueFieldName]) - scaleValue(0));
         }
         if (keyAxisOrient === 'left') {
             attrs.x = d => scaleValue(Math.min(d[valueFieldName], 0)) + margin.left;
-            attrs.width = d => Math.abs(scaleValue(d[valueFieldName]) - scaleValue(0));
         }
         if (keyAxisOrient === 'right') {
             attrs.x = d => scaleValue(Math.max(d[valueFieldName], 0)) + margin.left;
-            attrs.width = d => Math.abs(scaleValue(d[valueFieldName]) - scaleValue(0));
         }
     }
-    static setSegmentedBarAttrsByValue(attrs, keyAxisOrient, scaleValue, margin, blockSize) {
+    static setSegmentedBarAttrsByValue(attrs, keyAxisOrient, scaleValue, margin) {
         if (keyAxisOrient === 'top') {
             attrs.y = d => scaleValue(Math.min(d[1], d[0])) + margin.top;
             attrs.height = d => Math.abs(scaleValue(d[1]) - scaleValue(d[0]));

package/lib/engine/twoDimensionalNotation/dot/dotChart.d.ts

@@ -0,0 +1,36 @@
+import { MdtChartsDataRow } from "../../../config/config";
+import { BarChartSettings, BlockMargin, Orient, TwoDimensionalChartModel } from "../../../model/model";
+import { Block } from "../../block/block";
+import { Scales } from "../../features/scale/scale";
+export interface CanvasDotChartOptions {
+    elementAccessors: {
+        getBlock: () => Block;
+    };
+    dataOptions: {
+        keyFieldName: string;
+    };
+    canvas: {
+        keyAxisOrient: Orient;
+    };
+    bandOptions: {
+        settings: BarChartSettings;
+    };
+}
+export interface DotItemAttrGetters {
+    x1: (dataRow: MdtChartsDataRow) => number;
+    y1: (dataRow: MdtChartsDataRow) => number;
+    x2: (dataRow: MdtChartsDataRow) => number;
+    y2: (dataRow: MdtChartsDataRow) => number;
+}
+/**
+ * @alpha experimental feature. Need to refactor.
+ */
+export declare class CanvasDotChart {
+    private readonly options;
+    private readonly dotChartItemClass;
+    private renderedChart;
+    constructor(options: CanvasDotChartOptions);
+    render(scales: Scales, chart: TwoDimensionalChartModel, records: MdtChartsDataRow[], margin: BlockMargin): void;
+    update(scales: Scales, newRecords: MdtChartsDataRow[], margin: BlockMargin): Promise<void>[];
+    private getAttrs;
+}

package/lib/engine/twoDimensionalNotation/dot/dotChart.js

@@ -0,0 +1,106 @@
+import { Scale } from "../../features/scale/scale";
+import { DomHelper } from "../../helpers/domHelper";
+import { Helper } from "../../helpers/helper";
+import { NamesHelper } from "../../helpers/namesHelper";
+import { BarHelper, DotChartSettingsStore } from "../bar/barHelper";
+/**
+ * @alpha experimental feature. Need to refactor.
+ */
+export class CanvasDotChart {
+    constructor(options) {
+        this.options = options;
+        this.dotChartItemClass = NamesHelper.getClassName("dot-chart-item");
+        this.renderedChart = undefined;
+    }
+    render(scales, chart, records, margin) {
+        if (this.renderedChart)
+            return;
+        const valueFieldIndex = 0;
+        const elements = this.options.elementAccessors.getBlock().svg.getChartGroup(chart.index)
+            .selectAll(`.${this.dotChartItemClass}${Helper.getCssClassesLine(chart.cssClasses)}${Helper.getCssClassesLine(Helper.getCssClassesWithElementIndex(chart.cssClasses, valueFieldIndex))}`)
+            .data(records)
+            .enter()
+            .append('line')
+            .style("stroke-width", chart.dotViewOptions.shape.width)
+            .attr('class', this.dotChartItemClass);
+        const attrs = this.getAttrs(scales, chart, chart.data.valueFields[0], margin);
+        elements.attr('x1', d => attrs.x1(d))
+            .attr('y1', d => attrs.y1(d))
+            .attr('x2', d => attrs.x2(d))
+            .attr('y2', d => attrs.y2(d));
+        DomHelper.setCssClasses(elements, Helper.getCssClassesWithElementIndex(chart.cssClasses, valueFieldIndex));
+        DomHelper.setChartStyle(elements, chart.style, valueFieldIndex, 'stroke');
+        this.renderedChart = chart;
+    }
+    update(scales, newRecords, margin) {
+        if (!this.renderedChart)
+            return;
+        const valueFieldIndex = 0;
+        const elements = this.options.elementAccessors.getBlock().svg.getChartGroup(this.renderedChart.index)
+            .selectAll(`.${this.dotChartItemClass}${Helper.getCssClassesLine(this.renderedChart.cssClasses)}${Helper.getCssClassesLine(Helper.getCssClassesWithElementIndex(this.renderedChart.cssClasses, valueFieldIndex))}`)
+            .data(newRecords);
+        elements.exit().remove();
+        const newElements = elements
+            .enter()
+            .append('line')
+            .style("stroke-width", this.renderedChart.dotViewOptions.shape.width)
+            .attr('class', this.dotChartItemClass);
+        const attrs = this.getAttrs(scales, this.renderedChart, this.renderedChart.data.valueFields[0], margin);
+        newElements.attr('x1', d => attrs.x1(d))
+            .attr('y1', d => attrs.y1(d))
+            .attr('x2', d => attrs.x2(d))
+            .attr('y2', d => attrs.y2(d));
+        DomHelper.setCssClasses(newElements, Helper.getCssClassesWithElementIndex(this.renderedChart.cssClasses, valueFieldIndex));
+        DomHelper.setChartStyle(newElements, this.renderedChart.style, valueFieldIndex, 'stroke');
+        return [
+            new Promise(resolve => {
+                elements
+                    .interrupt()
+                    .transition()
+                    .duration(this.options.elementAccessors.getBlock().transitionManager.durations.chartUpdate)
+                    .attr('x1', d => attrs.x1(d))
+                    .attr('y1', d => attrs.y1(d))
+                    .attr('x2', d => attrs.x2(d))
+                    .attr('y2', d => attrs.y2(d))
+                    .on('end', () => resolve());
+            })
+        ];
+    }
+    getAttrs(scales, chart, field, margin) {
+        const attrs = {
+            x1: null,
+            y1: null,
+            x2: null,
+            y2: null
+        };
+        const settingsStore = new DotChartSettingsStore({ scaleBandWidth: Scale.getScaleBandWidth(scales.key) });
+        // TODO: refactor
+        if (this.options.canvas.keyAxisOrient === 'top' || this.options.canvas.keyAxisOrient === 'bottom') {
+            const handleBase = d => scales.key(Helper.getKeyFieldValue(d, this.options.dataOptions.keyFieldName, false)) + margin.left + settingsStore.getBandItemPad();
+            attrs.x1 = d => chart.dotViewOptions.shape.handleStartCoordinate(handleBase(d));
+            attrs.x2 = d => chart.dotViewOptions.shape.handleEndCoordinate(handleBase(d) + settingsStore.getBandItemSize());
+        }
+        if (this.options.canvas.keyAxisOrient === 'left' || this.options.canvas.keyAxisOrient === 'right') {
+            const handleBase = d => scales.key(Helper.getKeyFieldValue(d, this.options.dataOptions.keyFieldName, false)) + margin.top + settingsStore.getBandItemPad();
+            attrs.y1 = d => chart.dotViewOptions.shape.handleStartCoordinate(handleBase(d));
+            attrs.y2 = d => chart.dotViewOptions.shape.handleEndCoordinate(handleBase(d) + settingsStore.getBandItemSize());
+        }
+        if (this.options.canvas.keyAxisOrient === 'top') {
+            attrs.y1 = d => scales.value(Math.min(d[field.name], 0)) + margin.top + BarHelper.getBandItemValueStretch(scales.value, field.name)(d);
+            attrs.y2 = d => scales.value(Math.min(d[field.name], 0)) + margin.top + BarHelper.getBandItemValueStretch(scales.value, field.name)(d);
+        }
+        if (this.options.canvas.keyAxisOrient === 'bottom') {
+            attrs.y1 = d => scales.value(Math.max(d[field.name], 0)) + margin.top;
+            attrs.y2 = d => scales.value(Math.max(d[field.name], 0)) + margin.top;
+        }
+        if (this.options.canvas.keyAxisOrient === 'left') {
+            attrs.x1 = d => scales.value(Math.min(d[field.name], 0)) + margin.left + BarHelper.getBandItemValueStretch(scales.value, field.name)(d);
+            attrs.x2 = d => scales.value(Math.min(d[field.name], 0)) + margin.left + BarHelper.getBandItemValueStretch(scales.value, field.name)(d);
+        }
+        if (this.options.canvas.keyAxisOrient === 'right') {
+            attrs.x1 = d => scales.value(Math.max(d[field.name], 0)) + margin.left;
+            attrs.x2 = d => scales.value(Math.max(d[field.name], 0)) + margin.left;
+        }
+        return attrs;
+    }
+}

package/lib/engine/twoDimensionalNotation/twoDimensionalManager.d.ts

@@ -6,6 +6,7 @@ import { Engine } from "../engine";
 export declare class TwoDimensionalManager implements ChartContentManager {
     private canvasValueLabels?;
     private linearGradientDef?;
+    private dotChart;
     render(engine: Engine, model: Model<TwoDimensionalOptionsModel>): void;
     updateData(block: Block, model: Model<TwoDimensionalOptionsModel>, data: MdtChartsDataSource): void;
     updateColors(block: Block, model: Model<TwoDimensionalOptionsModel>): void;

package/lib/engine/twoDimensionalNotation/twoDimensionalManager.js

@@ -15,6 +15,7 @@ import { TwoDimRecordOverflowAlert } from "./extenders/twoDimRecordOverflowAlert
 import { Line } from "./line/line";
 import { CanvasValueLabels } from "../../engine/features/valueLabels/valueLabels";
 import { LinearGradientDef } from "../../engine/block/defs/LinearGradientDef";
+import { CanvasDotChart } from "./dot/dotChart";
 export class TwoDimensionalManager {
     render(engine, model) {
         const options = model.options;
@@ -23,6 +24,20 @@ export class TwoDimensionalManager {
         engine.block.svg.render(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, scales);
+        this.dotChart = new CanvasDotChart({
+            elementAccessors: {
+                getBlock: () => engine.block,
+            },
+            canvas: {
+                keyAxisOrient: options.axis.key.orient,
+            },
+            dataOptions: {
+                keyFieldName: options.data.keyField.name
+            },
+            bandOptions: {
+                settings: options.chartSettings.bar
+            }
+        });
         this.renderCharts(engine.block, options.charts, scales, engine.data, options.data, model.chartBlock.margin, options.axis.key.orient, options.chartSettings, model.blockCanvas.size);
         Axis.raiseKeyAxis(engine.block, options.axis.key);
         engine.block.filterEventManager.registerEventFor2D(scales.key, model.chartBlock.margin, model.blockCanvas.size, options);
@@ -110,6 +125,8 @@ export class TwoDimensionalManager {
                 Line.get({ staticSettings: chartSettings.lineLike }).render(block, chartScales, data[dataOptions.dataSource], dataOptions.keyField, margin, keyAxisOrient, chart);
             else if (chart.type === 'area')
                 Area.get({ staticSettings: chartSettings.lineLike }).render(block, chartScales, data[dataOptions.dataSource], dataOptions.keyField, margin, keyAxisOrient, chart, blockSize);
+            else if (chart.type === 'dot')
+                this.dotChart.render(chartScales, chart, data[dataOptions.dataSource], margin);
         });
         EmbeddedLabels.raiseGroups(block);
     }
@@ -128,6 +145,9 @@ export class TwoDimensionalManager {
             else if (chart.type === 'area') {
                 proms = Area.get({ staticSettings: chartSettings.lineLike }).update(block, chartScales, data[dataOptions.dataSource], dataOptions.keyField, margin, chart, keyAxisOrient, blockSize);
             }
+            else if (chart.type === 'dot') {
+                proms = this.dotChart.update(chartScales, data[dataOptions.dataSource], margin);
+            }
             promises.push(...proms);
         });
         return promises;

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

@@ -27,9 +27,8 @@ export declare class DataManagerModel {
      * @param chartsLength
      */
     private static getElementsInGroupAmount;
-    private static getBarChartsInGroupAmount;
+    private static getBarLikeChartsInGroupAmount;
     private static getScopedData;
     private static getScopedChartData;
-    private static getTypedData;
     private static getDataLimitByItemSize;
 }

package/lib/model/dataManagerModel/dataManagerModel.js

@@ -28,24 +28,13 @@ export class DataManagerModel {
     }
     static initDataScopeFor2D(configOptions, modelInstance, data, designerConfig) {
         modelInstance.dataModel.initMaxRecordsAmount(configOptions.data.maxRecordsAmount);
-        let itemsLength = 1;
-        itemsLength = (configOptions.charts)
-            .filter((chart) => chart.type === 'bar').length;
-        if (itemsLength === 0)
-            itemsLength = 1; // Если баров нет, то для одной записи выделяется столько же места, сколько для одного столбика
-        if (itemsLength !== 0) {
-            const axisLength = AxisModel.getAxisLength(configOptions.orientation, modelInstance.canvasModel);
-            const uniqueKeys = ModelHelper.getUniqueValues(data[configOptions.data.dataSource].map(d => d[configOptions.data.keyField.name]));
-            const dataLength = uniqueKeys.length;
-            const limit = this.getDataLimitByItemSize(this.getElementsInGroupAmount(configOptions, itemsLength), dataLength, axisLength, designerConfig.canvas.chartOptions.bar);
-            const allowableKeys = uniqueKeys.slice(0, limit);
-            const hidedRecordsAmount = dataLength - allowableKeys.length;
-            modelInstance.dataModel.initScope(this.limitAllowableKeys(allowableKeys, hidedRecordsAmount, modelInstance.dataModel));
-        }
-        else {
-            const allKeys = this.getDataValuesByKeyField(data, configOptions.data.dataSource, configOptions.data.keyField.name);
-            modelInstance.dataModel.initScope(this.getMaximumPossibleScope(allKeys, modelInstance.dataModel));
-        }
+        const axisLength = AxisModel.getAxisLength(configOptions.orientation, modelInstance.canvasModel);
+        const uniqueKeys = ModelHelper.getUniqueValues(data[configOptions.data.dataSource].map(d => d[configOptions.data.keyField.name]));
+        const dataLength = uniqueKeys.length;
+        const limit = this.getDataLimitByItemSize(this.getElementsInGroupAmount(configOptions), dataLength, axisLength, designerConfig.canvas.chartOptions.bar);
+        const allowableKeys = uniqueKeys.slice(0, limit);
+        const hidedRecordsAmount = dataLength - allowableKeys.length;
+        modelInstance.dataModel.initScope(this.limitAllowableKeys(allowableKeys, hidedRecordsAmount, modelInstance.dataModel));
     }
     static initDataScopeForPolar(configOptions, modelInstance, data, legendBlock, legendCanvas) {
         modelInstance.dataModel.initMaxRecordsAmount(configOptions.data.maxRecordsAmount);
@@ -100,17 +89,17 @@ export class DataManagerModel {
      * @param configOptions
      * @param chartsLength
      */
-    static getElementsInGroupAmount(configOptions, chartsLength) {
-        if (configOptions.type === '2d')
-            return this.getBarChartsInGroupAmount(configOptions.charts);
-        return chartsLength;
+    static getElementsInGroupAmount(configOptions) {
+        const bars = this.getBarLikeChartsInGroupAmount(configOptions.charts, 'bar');
+        const dots = configOptions.charts.some(chart => chart.type === 'dot') ? 1 : 0;
+        return Math.max(bars, dots);
     }
-    static getBarChartsInGroupAmount(charts) {
+    static getBarLikeChartsInGroupAmount(charts, type) {
         let barsAmount = 0;
         charts.forEach(chart => {
-            if (chart.type === 'bar' && chart.isSegmented)
+            if (chart.type === type && chart.isSegmented)
                 barsAmount += 1; // в сегментированном баре все valueFields находятся внутри одного бара, поэтому бар всегда один.
-            else if (chart.type === 'bar')
+            else if (chart.type === type)
                 barsAmount += chart.data.valueFields.length;
         });
         return barsAmount;
@@ -123,13 +112,6 @@ export class DataManagerModel {
     static getScopedChartData(data, allowableKeys, keyFieldName) {
         return data.filter(d => allowableKeys.findIndex(key => key === d[keyFieldName]) !== -1);
     }
-    static getTypedData(data, field) {
-        if (field.format === 'date')
-            data.forEach(d => {
-                d[field.name] = new Date(d[field.name]);
-            });
-        return data;
-    }
     static getDataLimitByItemSize(elementsInGroupAmount, dataLength, axisLength, barOptions) {
         let sumSize = dataLength * (elementsInGroupAmount * barOptions.minBarWidth + (elementsInGroupAmount - 1) * barOptions.barDistance + barOptions.groupMinDistance);
         while (dataLength !== 0 && axisLength < sumSize) {

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

@@ -21,7 +21,6 @@ export declare class AxisModel {
     static getAxisTranslateY(axisType: AxisType, chartOrientation: ChartOrientation, axisPosition: AxisPosition, canvasModel: CanvasModel): number;
     static getKeyAxisLabelPosition(canvasModel: CanvasModel, scopedDataLength: number, axisConfig?: DiscreteAxisOptions): AxisLabelPosition;
     static getLabelSize(labelMaxWidth: number, labelTexts: string[]): LabelSize;
-    static getLabelSizeLegacy(labelMaxWidth: number, labelTexts: string[]): LabelSize;
     static getRoundValue(value: number): number;
     private static getKeyAxisTranslateModel;
 }

package/lib/model/featuresModel/axisModel.js

@@ -1,5 +1,5 @@
 import { ModelHelper } from "../helpers/modelHelper";
-import { AxisType, CLASSES } from "../modelBuilder";
+import { AxisType } from "../modelBuilder";
 import { DataManagerModel } from "../dataManagerModel/dataManagerModel";
 import { TwoDimensionalModel } from "../notations/twoDimensionalModel";
 import { AxisModelService, AxisModelTickCalculator, showAllTicks } from "./axisModelService";
@@ -105,33 +105,6 @@ export class AxisModel {
             width: longestLabelWidth > labelMaxWidth ? labelMaxWidth : longestLabelWidth
         };
     }
-    static getLabelSizeLegacy(labelMaxWidth, labelTexts) {
-        const labelSize = {
-            width: 0,
-            height: 0
-        };
-        const textBlock = document.createElement('span');
-        textBlock.style.opacity = '0';
-        textBlock.style.position = 'absolute';
-        textBlock.style.whiteSpace = 'nowrap';
-        textBlock.classList.add(CLASSES.dataLabel);
-        let maxLabel = '';
-        let biggestScore = 0;
-        let maxWidth = 0;
-        labelTexts.forEach((text) => {
-            if (ModelHelper.getStringScore(text) > biggestScore) {
-                maxLabel = text;
-                biggestScore = ModelHelper.getStringScore(text);
-            }
-        });
-        textBlock.textContent = maxLabel === '0000' ? maxLabel : maxLabel;
-        document.body.append(textBlock);
-        maxWidth = Math.ceil(textBlock.getBoundingClientRect().width);
-        labelSize.height = textBlock.getBoundingClientRect().height;
-        labelSize.width = maxWidth > labelMaxWidth ? labelMaxWidth : maxWidth;
-        textBlock.remove();
-        return labelSize;
-    }
     static getRoundValue(value) {
         const absValue = Math.abs(value);
         const sign = Math.sign(value);

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

@@ -13,7 +13,6 @@ export interface LegendItemContentOptions {
     };
 }
 export declare class LegendCanvasModel {
-    static getLegendItemWidth(text: string): number;
     static findElementsAmountByLegendSize(items: LegendItemContentOptions[], position: LegendPosition, legendBlockWidth: number, legendBlockHeight: number): DataLegendParams;
     private static getLegendWrapperEl;
 }

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

@@ -1,23 +1,5 @@
 import { CLASSES } from "../../modelBuilder";
 export class LegendCanvasModel {
-    static getLegendItemWidth(text) {
-        const itemWrapper = document.createElement('div');
-        itemWrapper.style.opacity = '0';
-        const colorBlock = document.createElement('span');
-        const textBlock = document.createElement('span');
-        itemWrapper.style.display = 'inline-block';
-        itemWrapper.classList.add(CLASSES.legendItem);
-        colorBlock.classList.add(CLASSES.legendColor);
-        textBlock.classList.add(CLASSES.legendLabel);
-        textBlock.textContent = text;
-        itemWrapper.append(colorBlock, textBlock);
-        document.body.append(itemWrapper);
-        const sumWidth = itemWrapper.getBoundingClientRect().width
-            + parseFloat(window.getComputedStyle(itemWrapper, null).getPropertyValue('margin-left'))
-            + parseFloat(window.getComputedStyle(itemWrapper, null).getPropertyValue('margin-right'));
-        itemWrapper.remove();
-        return sumWidth;
-    }
     //TODO: find better solution
     static findElementsAmountByLegendSize(items, position, legendBlockWidth, legendBlockHeight) {
         const legendWrapper = this.getLegendWrapperEl(legendBlockWidth, position === "right" ? "column" : "row");

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

@@ -6,6 +6,5 @@ export declare class TwoDimLegendModel {
     private configReader;
     constructor(configReader: TwoDimConfigReader);
     recalcMarginWith2DLegend(modelInstance: ModelInstance, legendBlockModel: LegendBlockModel, legendOptions: Legend): void;
-    private getLegendSizeLegacy;
     private getLegendModel;
 }

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

@@ -23,10 +23,6 @@ export class TwoDimLegendModel {
             legendBlockModel.coordinate[legendPosition].size = legendSize;
         }
     }
-    getLegendSizeLegacy() {
-        const heightOfLegendItemWithoutWordWrapping = 20;
-        return heightOfLegendItemWithoutWordWrapping;
-    }
     getLegendModel(legendOptions) {
         const position = legendOptions.show ? "top" : "off";
         return {

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

@@ -7,7 +7,7 @@ export declare enum ScaleType {
     Value = 1
 }
 export declare class ScaleModel {
-    getScaleKey(allowableKeys: string[], orient: ChartOrientation, canvasModel: CanvasModel, charts: MdtChartsTwoDimensionalChart[], barCharts: MdtChartsTwoDimensionalChart[]): ScaleKeyModel;
+    getScaleKey(allowableKeys: string[], orient: ChartOrientation, canvasModel: CanvasModel, charts: MdtChartsTwoDimensionalChart[], bandLikeCharts: MdtChartsTwoDimensionalChart[]): ScaleKeyModel;
     getScaleLinear(options: MdtChartsTwoDimensionalOptions, dataRows: MdtChartsDataRow[], canvasModel: CanvasModel, configReader?: TwoDimConfigReader): ScaleValueModel;
     getScaleSecondaryLinear(options: MdtChartsTwoDimensionalOptions, dataRows: MdtChartsDataRow[], canvasModel: CanvasModel, configReader?: TwoDimConfigReader): ScaleValueModel;
     private getScaleKeyType;

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

@@ -6,7 +6,7 @@ export var ScaleType;
     ScaleType[ScaleType["Value"] = 1] = "Value";
 })(ScaleType || (ScaleType = {}));
 export class ScaleModel {
-    getScaleKey(allowableKeys, orient, canvasModel, charts, barCharts) {
+    getScaleKey(allowableKeys, orient, canvasModel, charts, bandLikeCharts) {
         return {
             domain: allowableKeys,
             range: {
@@ -14,7 +14,7 @@ export class ScaleModel {
                 end: getScaleKeyRangePeek(orient, canvasModel)
             },
             type: this.getScaleKeyType(charts),
-            elementsAmount: getElementsAmountForScale(barCharts)
+            elementsAmount: getElementsAmountForScale(bandLikeCharts)
         };
     }
     getScaleLinear(options, dataRows, canvasModel, configReader) {
@@ -42,8 +42,8 @@ export class ScaleModel {
         };
     }
     getScaleKeyType(charts) {
-        if (charts.findIndex((chart) => chart.type === 'bar') === -1)
-            return 'point';
-        return 'band';
+        if (charts.some((chart) => chart.type === 'bar' || chart.type === 'dot'))
+            return 'band';
+        return 'point';
     }
 }

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

@@ -2,4 +2,4 @@ import { ChartOrientation, MdtChartsTwoDimensionalChart } from "../../../config/
 import { CanvasSizesModel } from "../../modelInstance/canvasModel/canvasSizesModel/canvasSizeModel";
 export declare function getScaleKeyRangePeek(chartOrientation: ChartOrientation, canvasModel: CanvasSizesModel): number;
 export declare function getScaleValueRangePeek(chartOrientation: string, canvasModel: CanvasSizesModel): number;
-export declare function getElementsAmountForScale(barCharts: MdtChartsTwoDimensionalChart[]): number;
+export declare function getElementsAmountForScale(bandLikeCharts: MdtChartsTwoDimensionalChart[]): number;

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

@@ -8,15 +8,21 @@ export function getScaleValueRangePeek(chartOrientation, canvasModel) {
         return canvasModel.getChartBlockHeight();
     return canvasModel.getChartBlockWidth();
 }
-export function getElementsAmountForScale(barCharts) {
-    if (barCharts.length === 0)
+export function getElementsAmountForScale(bandLikeCharts) {
+    if (bandLikeCharts.length === 0)
         return 1;
-    let barsAmount = 0;
-    barCharts.forEach(chart => {
-        if (chart.isSegmented)
-            barsAmount += 1; // Если бар сегментированный, то все valueFields являются частями одного бара
-        else
-            barsAmount += chart.data.valueFields.length;
+    let barAmounts = {};
+    bandLikeCharts.forEach(chart => {
+        if (!barAmounts[chart.type])
+            barAmounts[chart.type] = 0;
+        if (chart.type === 'dot')
+            barAmounts[chart.type] = 1;
+        if (chart.type === 'bar') {
+            if (chart.isSegmented)
+                barAmounts[chart.type] += 1;
+            else
+                barAmounts[chart.type] += chart.data.valueFields.length;
+        }
     });
-    return barsAmount;
+    return Math.max(...Object.values(barAmounts));
 }

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

@@ -5,4 +5,5 @@ export declare class TwoDimensionalModelHelper {
     static getGradientDefs(charts: TwoDimensionalChartModel[], keyAxisOrient: Orient, chartOrient: ChartOrientation): GradientDef[];
     private static getGradientItems;
     private static calculateOpacityItem;
+    private static getGradientItemColor;
 }

package/lib/model/helpers/twoDimensionalModelHelper.js

@@ -37,20 +37,28 @@ export class TwoDimensionalModelHelper {
         return gradients;
     }
     static getGradientItems(gradientId, elementColor, keyAxisOrient) {
-        return [0, 1].map(indexItem => ({
-            id: gradientId + `-item-${indexItem}`,
-            color: elementColor,
-            offset: indexItem,
-            opacity: this.calculateOpacityItem(indexItem, keyAxisOrient)
+        return [0, 1].map(itemIndex => ({
+            id: gradientId + `-item-${itemIndex}`,
+            color: this.getGradientItemColor(itemIndex, keyAxisOrient, elementColor),
+            offset: itemIndex,
+            opacity: this.calculateOpacityItem(itemIndex, keyAxisOrient)
         }));
     }
-    static calculateOpacityItem(indexItem, orientation) {
+    static calculateOpacityItem(itemIndex, orientation) {
         const maxOpacity = 0.3;
         const minOpacity = 0;
         if (orientation === 'bottom' || orientation === 'right')
-            return indexItem === 0 ? maxOpacity : minOpacity;
+            return itemIndex === 0 ? maxOpacity : minOpacity;
         else
-            return indexItem === 0 ? minOpacity : maxOpacity;
+            return itemIndex === 0 ? minOpacity : maxOpacity;
     }
     ;
+    static getGradientItemColor(itemIndex, orientation, elementColor) {
+        const maxColor = elementColor;
+        const minColor = "white";
+        if (orientation === 'bottom' || orientation === 'right')
+            return itemIndex === 0 ? maxColor : minColor;
+        else
+            return itemIndex === 0 ? minColor : maxColor;
+    }
 }

package/lib/model/margin/twoDim/twoDimMarginModel.d.ts

@@ -2,8 +2,8 @@ import { DesignerConfig } from "../../../designer/designerConfig";
 import { OtherCommonComponents } from "../../model";
 import { TwoDimConfigReader } from "../../modelInstance/configReader";
 import { ModelInstance } from "../../modelInstance/modelInstance";
-export declare const AXIS_HORIZONTAL_LABEL_PADDING = 15;
-export declare const AXIS_VERTICAL_LABEL_PADDING = 10;
+export declare const AXIS_HORIZONTAL_LABEL_PADDING = 20;
+export declare const AXIS_VERTICAL_LABEL_PADDING = 8;
 export declare class TwoDimMarginModel {
     private designerConfig;
     private configReader;

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

@@ -3,8 +3,8 @@ import { TwoDimLegendModel } from "../../featuresModel/legendModel/twoDimLegendM
 import { keyAxisLabelHorizontalLog, keyAxisLabelVerticalLog } from "../../featuresModel/scaleModel/scaleAxisRecalcer";
 import { AxisType } from "../../modelBuilder";
 import { TwoDimensionalModel } from "../../notations/twoDimensionalModel";
-export const AXIS_HORIZONTAL_LABEL_PADDING = 15;
-export const AXIS_VERTICAL_LABEL_PADDING = 10;
+export const AXIS_HORIZONTAL_LABEL_PADDING = 20;
+export const AXIS_VERTICAL_LABEL_PADDING = 8;
 export class TwoDimMarginModel {
     constructor(designerConfig, configReader) {
         this.designerConfig = designerConfig;

package/lib/model/model.d.ts

@@ -272,14 +272,26 @@ export interface AreaViewBorderLine {
     on: boolean;
     colorStyle: ChartStyle;
 }
-export interface TwoDimensionalChartModel extends ChartModel, TwoDimensionalLineLikeChartModel, TwoDimensionalBarLikeChartModel, TwoDimensionalAreaChartModel {
+export interface DotChartModel {
+    dotViewOptions: DotChartViewModel;
+}
+export interface DotChartViewModel {
+    shape: DotChartShapeOptions;
+}
+interface DotChartShapeOptions {
+    type: "line";
+    handleStartCoordinate: (calculatedBandItemStartCoordinate: number) => number;
+    handleEndCoordinate: (calculatedBandItemSize: number) => number;
+    width: number;
+}
+export interface TwoDimensionalChartModel extends ChartModel, TwoDimensionalLineLikeChartModel, TwoDimensionalBarLikeChartModel, TwoDimensionalAreaChartModel, DotChartModel, DotChartModel {
     type: TwoDimensionalChartType;
     data: TwoDimensionalChartDataModel;
     index: number;
     embeddedLabels: EmbeddedLabelTypeModel;
     isSegmented: boolean;
     legend: ChartLegendModel;
-    valueLabels?: TwoDimChartValueLabelsOptions;
+    valueLabels: TwoDimChartValueLabelsOptions;
 }
 export interface IntervalChartModel extends Omit<ChartModel, "legend"> {
     type: IntervalChartType;

package/lib/model/modelBuilder.js

@@ -76,12 +76,10 @@ export function assembleModel(config, data, designerConfig) {
             options: null,
             dataSettings: null
         };
-    const dataRows = modelInstance.dataModel.repository.getRawRows();
-    const resolvedTitle = getResolvedTitle(config.options.title, dataRows);
     const otherComponents = OtherComponentsModel.getOtherComponentsModel({
         elementsOptions: designerConfig.elementsOptions,
         legendConfig: designerConfig.canvas.legendBlock,
-        title: resolvedTitle
+        title: getResolvedTitle(config.options.title, modelInstance.dataModel.repository.getRawRows())
     }, modelInstance);
     const marginModel = new MarginModel(designerConfig, config);
     marginModel.initMargin(otherComponents, modelInstance);

package/lib/model/modelInstance/configReader.js

@@ -55,18 +55,18 @@ export class TwoDimConfigReader {
         return !!this.options.axis.valueSecondary && this.options.charts.some(chart => chart.data.valueGroup === 'secondary');
     }
     getValueLabelFormatterForChart(chartIndex) {
-        var _a, _b, _c;
+        var _a, _b, _c, _d;
         const chart = this.options.charts[chartIndex];
         const axis = this.options.axis;
-        if (chart.valueLabels.format)
+        if ((_a = chart.valueLabels) === null || _a === void 0 ? void 0 : _a.format)
             return chart.valueLabels.format;
         if (chart.data.valueGroup === "secondary") {
-            if ((_a = axis.valueSecondary.labels) === null || _a === void 0 ? void 0 : _a.format)
+            if ((_b = axis.valueSecondary.labels) === null || _b === void 0 ? void 0 : _b.format)
                 return axis.valueSecondary.labels.format;
-            else if ((_b = axis.value.labels) === null || _b === void 0 ? void 0 : _b.format)
+            else if ((_c = axis.value.labels) === null || _c === void 0 ? void 0 : _c.format)
                 return axis.value.labels.format;
         }
-        else if ((_c = axis.value.labels) === null || _c === void 0 ? void 0 : _c.format)
+        else if ((_d = axis.value.labels) === null || _d === void 0 ? void 0 : _d.format)
             return axis.value.labels.format;
         const valueFieldFormat = chart.data.valueFields[0].format;
         return (v) => this.designerConfig.dataFormat.formatters(v, { type: valueFieldFormat });

package/lib/model/notations/polar/polarModel.js

@@ -47,7 +47,7 @@ export class PolarModel {
         chartsModel.push({
             type: chart.type,
             data: Object.assign({}, chart.data),
-            tooltip: chart.tooltip,
+            tooltip: { show: true },
             cssClasses: ChartStyleModelService.getCssClasses(0),
             style: ChartStyleModelService.getChartStyle(dataLength, chartStyleConfig),
             legend: {

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

@@ -32,7 +32,8 @@ export function getLegendMarkerOptions(chart) {
     const shapeByType = {
         area: "default",
         bar: "bar",
-        line: "line"
+        line: "line",
+        dot: "default"
     };
     return {
         markerShape: shapeByType[chart.type],
@@ -42,9 +43,9 @@ export function getLegendMarkerOptions(chart) {
 }
 export function getWidthOfLegendMarkerByType(chartType) {
     if (chartType === "bar")
-        return 10;
+        return 8;
     if (chartType === "line")
-        return 30;
+        return 24;
     if (chartType === "area")
         return styledElementValues.defaultLegendMarkerSizes.widthPx;
 }

package/lib/model/notations/twoDimensionalModel.d.ts

@@ -17,5 +17,5 @@ export declare class TwoDimensionalModel {
     private static findChartsWithEmbeddedKeyLabels;
     private static getEmbeddedLabelType;
     private static getAdditionalElements;
-    private static getChartsByType;
+    private static getChartsByTypes;
 }

package/lib/model/notations/twoDimensionalModel.js

@@ -10,13 +10,13 @@ import { TwoDimensionalModelHelper } from "../helpers/twoDimensionalModelHelper"
 export class TwoDimensionalModel {
     static getOptions(configReader, designerConfig, modelInstance) {
         var _a;
-        let secondaryScaleValueInfo;
         const options = configReader.options;
         const canvasModel = modelInstance.canvasModel;
         const scaleModel = new ScaleModel();
         const scaleMarginRecalcer = new ScaleAxisRecalcer(() => scaleModel.getScaleLinear(options, modelInstance.dataModel.repository.getScopedRows(), canvasModel, configReader));
         scaleMarginRecalcer.recalculateMargin(canvasModel, options.orientation, options.axis.key);
         const scaleValueInfo = scaleMarginRecalcer.getScaleValue();
+        let secondaryScaleValueInfo;
         if (configReader.containsSecondaryAxis()) {
             const secondaryScaleMarginRecalcer = new ScaleAxisRecalcer(() => scaleModel.getScaleSecondaryLinear(options, modelInstance.dataModel.repository.getScopedRows(), canvasModel, configReader));
             secondaryScaleMarginRecalcer.recalculateMargin(canvasModel, options.orientation, options.axis.key);
@@ -29,7 +29,7 @@ export class TwoDimensionalModel {
             title: getResolvedTitle(options.title, modelInstance.dataModel.repository.getRawRows()),
             selectable: !!options.selectable,
             orient: options.orientation,
-            scale: Object.assign({ key: scaleModel.getScaleKey(modelInstance.dataModel.getAllowableKeys(), options.orientation, canvasModel, options.charts, this.getChartsByType(options.charts, 'bar')), value: scaleValueInfo.scale }, (configReader.containsSecondaryAxis() && { valueSecondary: secondaryScaleValueInfo.scale })),
+            scale: Object.assign({ key: scaleModel.getScaleKey(modelInstance.dataModel.getAllowableKeys(), options.orientation, canvasModel, options.charts, this.getChartsByTypes(options.charts, ['bar', 'dot'])), value: scaleValueInfo.scale }, (configReader.containsSecondaryAxis() && { valueSecondary: secondaryScaleValueInfo.scale })),
             axis: Object.assign({ key: keyAxis, value: AxisModel.getMainValueAxis(options.orientation, options.axis.value.position, options.axis.value, designerConfig.canvas.axisLabel, canvasModel) }, (configReader.containsSecondaryAxis() && { valueSecondary: AxisModel.getSecondaryValueAxis(options.orientation, options.axis.value.position, options.axis.valueSecondary, designerConfig.canvas.axisLabel, canvasModel) })),
             type: options.type,
             data: Object.assign({}, options.data),
@@ -55,7 +55,7 @@ export class TwoDimensionalModel {
      * @param charts Чарты из конфига
      */
     static sortCharts(charts) {
-        const chartOrder = ['area', 'bar', 'line'];
+        const chartOrder = ['area', 'bar', 'line', 'dot'];
         charts.sort((chart1, chart2) => chartOrder.indexOf(chart1.type) - chartOrder.indexOf(chart2.type));
     }
     static getChartsSettings(chartOptions, chartOrientation) {
@@ -70,9 +70,17 @@ export class TwoDimensionalModel {
         this.sortCharts(charts);
         const chartsModel = [];
         charts.forEach((chart, index) => {
-            var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p;
+            var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t;
             const style = styleModel.getChartStyle(chart, index);
-            chartsModel.push(Object.assign(Object.assign({ type: chart.type, isSegmented: chart.isSegmented, data: Object.assign({}, chart.data), tooltip: chart.tooltip, cssClasses: ChartStyleModelService.getCssClasses(index), style, embeddedLabels: this.getEmbeddedLabelType(chart, chartOrientation), markersOptions: {
+            chartsModel.push({
+                type: chart.type,
+                isSegmented: chart.isSegmented,
+                data: Object.assign({}, chart.data),
+                tooltip: { show: true },
+                cssClasses: ChartStyleModelService.getCssClasses(index),
+                style,
+                embeddedLabels: this.getEmbeddedLabelType(chart, chartOrientation),
+                markersOptions: {
                     show: ({ row, valueFieldName }) => TwoDimensionalModelHelper.shouldMarkerShow(chart, dataModelRep.getRawRows(), valueFieldName, row, keyFieldName),
                     styles: {
                         highlighted: {
@@ -85,19 +93,32 @@ export class TwoDimensionalModel {
                             }
                         }
                     }
-                }, lineLikeViewOptions: {
+                },
+                lineLikeViewOptions: {
                     dashedStyles: parseDashStyles((_k = chart.lineStyles) === null || _k === void 0 ? void 0 : _k.dash),
                     renderForKey: (dataRow, valueFieldName) => dataRow[valueFieldName] !== null && dataRow[valueFieldName] !== undefined
-                }, barViewOptions: { hatch: { on: (_o = (_m = (_l = chart.barStyles) === null || _l === void 0 ? void 0 : _l.hatch) === null || _m === void 0 ? void 0 : _m.on) !== null && _o !== void 0 ? _o : false } }, legend: getLegendMarkerOptions(chart), index }, (((_p = chart.valueLabels) === null || _p === void 0 ? void 0 : _p.on) && {
+                },
+                barViewOptions: { hatch: { on: (_o = (_m = (_l = chart.barStyles) === null || _l === void 0 ? void 0 : _l.hatch) === null || _m === void 0 ? void 0 : _m.on) !== null && _o !== void 0 ? _o : false } },
+                legend: getLegendMarkerOptions(chart),
+                index,
                 valueLabels: {
-                    show: true,
+                    show: (_q = (_p = chart.valueLabels) === null || _p === void 0 ? void 0 : _p.on) !== null && _q !== void 0 ? _q : false,
                     handleX: (scaledValue) => getValueLabelX(scaledValue, keyAxisOrient, canvasModel.getMargin()),
                     handleY: (scaledValue) => getValueLabelY(scaledValue, keyAxisOrient, canvasModel.getMargin()),
                     textAnchor: calculateValueLabelAlignment(keyAxisOrient).textAnchor,
                     dominantBaseline: calculateValueLabelAlignment(keyAxisOrient).dominantBaseline,
                     format: configReader.getValueLabelFormatterForChart(index),
+                },
+                areaViewOptions: getAreaViewOptions(chart, index, style),
+                dotViewOptions: {
+                    shape: {
+                        type: "line",
+                        handleEndCoordinate: (v) => v + 2,
+                        handleStartCoordinate: (v) => v - 2,
+                        width: (_t = (_s = (_r = chart.dotLikeStyles) === null || _r === void 0 ? void 0 : _r.shape) === null || _s === void 0 ? void 0 : _s.width) !== null && _t !== void 0 ? _t : 2
+                    }
                 }
-            })), { areaViewOptions: getAreaViewOptions(chart, index, style) }));
+            });
         });
         return chartsModel;
     }
@@ -119,7 +140,7 @@ export class TwoDimensionalModel {
             gridLine: options.additionalElements.gridLine
         };
     }
-    static getChartsByType(charts, type) {
-        return charts.filter(chart => chart.type === type);
+    static getChartsByTypes(charts, types) {
+        return charts.filter(chart => types.includes(chart.type));
     }
 }

package/lib/style/charts-main.css

@@ -1,5 +1,5 @@
 :root {
-	--chart-base-font-size: 13px;
+	--chart-base-font-size: 12px;
 }
 
 .wrapper {
@@ -80,7 +80,7 @@
     text-overflow: ellipsis;
 }
 .legend-wrapper-without-wrap .legend-item-inline:not(:last-of-type) {
-    margin-right: 12px
+    margin-right: 16px
 }
 .legend-wrapper-with-wrap .legend-item-inline {
     margin: 2px;

package/lib/style/charts-main.less

@@ -1,5 +1,5 @@
 :root {
-	--chart-base-font-size: 13px;
+	--chart-base-font-size: 12px;
 }
 
 .wrapper {
@@ -80,7 +80,7 @@
     text-overflow: ellipsis;
 }
 .legend-wrapper-without-wrap .legend-item-inline:not(:last-of-type) {
-    margin-right: 12px
+    margin-right: 16px
 }
 .legend-wrapper-with-wrap .legend-item-inline {
     margin: 2px;

package/package.json

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