mdt-charts 1.21.2 → 1.23.0

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

@@ -1,6 +1,7 @@
-import { BarChartSettings, BlockMargin, Orient, TwoDimensionalChartModel } from "../../../model/model";
+import { AxisScale } from "d3-axis";
+import { BarBorderRadius, 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,36 @@ export interface BarAttrsHelper {
     width: (dataRow: MdtChartsDataRow) => number;
     height: (dataRow: MdtChartsDataRow) => number;
 }
+export interface GroupBarsSegment {
+    segmentIndex: number;
+    chart: TwoDimensionalChartModel;
+}
+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 +48,12 @@ 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 declare function onBarChartInit(createBarPipeline: Pipeline<Selection<SVGRectElement, any, BaseType, any>, TwoDimensionalChartModel>, createSegmentGroupBarsPipeline: Pipeline<Selection<SVGRectElement, any, BaseType, any>, GroupBarsSegment>): void;
+export declare function getClipPathValue({ topLeft, topRight, bottomLeft, bottomRight }: BarBorderRadius): string;
+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, blockSize) {
+    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 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]));
@@ -102,8 +135,20 @@ export class BarHelper {
         }
     }
 }
-export function onBarChartInit(createBarPipeline) {
+export function onBarChartInit(createBarPipeline, createSegmentGroupBarsPipeline) {
     createBarPipeline.push(hatchBar);
+    createBarPipeline.push(roundGroupedBars);
+    createSegmentGroupBarsPipeline.push(roundSegmentedBars);
+}
+function roundSegmentedBars(bars, segment) {
+    const radiusValues = segment.chart.barViewOptions.borderRadius.segmented.handle(segment.segmentIndex);
+    return bars.style('clip-path', getClipPathValue(radiusValues));
+}
+function roundGroupedBars(bars, chart) {
+    return bars.style('clip-path', getClipPathValue(chart.barViewOptions.borderRadius.grouped));
+}
+export function getClipPathValue({ topLeft, topRight, bottomLeft, bottomRight }) {
+    return `inset(0px round ${topLeft}px ${topRight}px ${bottomRight}px ${bottomLeft}px)`;
 }
 function hatchBar(bars, chart) {
     if (chart.barViewOptions.hatch.on)

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/line/lineHelper.js

@@ -45,6 +45,10 @@ export function onLineChartInit(creatingPipeline) {
         }
         return path;
     });
+    creatingPipeline.push(setStrokeWidth);
+}
+function setStrokeWidth(path, chart) {
+    return path.style('stroke-width', chart.lineLikeViewOptions.strokeWidth);
 }
 export function applyLineDash(lineSelection, dashSize, gapSize) {
     return lineSelection.style('stroke-dasharray', `${dashSize} ${gapSize}`);

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;
@@ -22,7 +23,21 @@ export class TwoDimensionalManager {
         engine.block.scales = scales;
         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);
+        GridLine.render(engine.block, options.additionalElements.gridLine, 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);
@@ -70,7 +85,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, scales);
+        GridLine.update(block, options.additionalElements.gridLine, 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);
         Promise.all(promises)
             .then(() => {
@@ -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);
@@ -83,7 +72,7 @@ export class DataManagerModel {
             wrapperSize: { marginRightPx: styledElementValues.legend.inlineDynamicItemWrapperMarginRightPx }
         }));
         if (position === 'right') {
-            return LegendCanvasModel.findElementsAmountByLegendSize(legendItemContentOptions, position, this.polarMarginCalculator.getMaxLegendWidth(legendCanvas, canvasModel.getBlockSize().width), canvasModel.getChartBlockHeight() - legendBlock.coordinate.bottom.margin.bottom);
+            return LegendCanvasModel.findElementsAmountByLegendSize(legendItemContentOptions, position, this.polarMarginCalculator.getMaxLegendWidth(legendCanvas, canvasModel.getBlockSize().width), canvasModel.getChartBlockHeight() - legendBlock.coordinate.right.margin.bottom);
         }
         else {
             return LegendCanvasModel.findElementsAmountByLegendSize(legendItemContentOptions, position, canvasModel.getChartBlockWidth() - legendBlock.coordinate.bottom.margin.left - legendBlock.coordinate.bottom.margin.right, canvasModel.getChartBlockHeight() - legendBlock.coordinate.bottom.margin.bottom - legendBlock.coordinate.bottom.margin.top - MIN_DONUT_BLOCK_SIZE);
@@ -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,13 +1,14 @@
 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";
 export const MINIMAL_VERTICAL_STEP_SIZE = 60;
 export const MINIMAL_HORIZONTAL_STEP_SIZE = 100;
+const DEFAULT_AXIS_LINE_VISIBLE = true;
 export class AxisModel {
     static getKeyAxis(options, data, labelConfig, canvasModel, tooltipSettings, getZeroCoordinate) {
-        var _a;
+        var _a, _b, _c;
         const { charts, orientation, data: dataOptions } = options;
         const axisConfig = options.axis.key;
         const translate = this.getKeyAxisTranslateModel(orientation, axisConfig.position, canvasModel, getZeroCoordinate);
@@ -26,7 +27,10 @@ export class AxisModel {
                 showTick: tickCalculator.createFunctionCalculator(this.getAxisLength(orientation, canvasModel)),
                 linearTickStep: MINIMAL_HORIZONTAL_STEP_SIZE
             },
-            visibility: axisConfig.visibility
+            visibility: axisConfig.visibility,
+            line: {
+                visible: (_c = (_b = axisConfig.line) === null || _b === void 0 ? void 0 : _b.visible) !== null && _c !== void 0 ? _c : DEFAULT_AXIS_LINE_VISIBLE
+            }
         };
     }
     static getMainValueAxis(orient, position, axisConfig, labelConfig, canvasModel) {
@@ -36,7 +40,7 @@ export class AxisModel {
         return this.getValueAxis(orient, mainAxisPosition === "start" ? "end" : "start", 'value-secondary-axis', axisConfig, labelConfig, canvasModel);
     }
     static getValueAxis(orient, position, cssClass, axisConfig, labelConfig, canvasModel) {
-        var _a, _b;
+        var _a, _b, _c, _d;
         return {
             type: 'value',
             orient: AxisModel.getAxisOrient(AxisType.Value, orient, position),
@@ -54,7 +58,10 @@ export class AxisModel {
                 showTick: showAllTicks,
                 linearTickStep: (_b = (_a = axisConfig.labels) === null || _a === void 0 ? void 0 : _a.stepSize) !== null && _b !== void 0 ? _b : (orient === "horizontal" ? MINIMAL_HORIZONTAL_STEP_SIZE : MINIMAL_VERTICAL_STEP_SIZE)
             },
-            visibility: axisConfig.visibility
+            visibility: axisConfig.visibility,
+            line: {
+                visible: (_d = (_c = axisConfig.line) === null || _c === void 0 ? void 0 : _c.visible) !== null && _d !== void 0 ? _d : DEFAULT_AXIS_LINE_VISIBLE
+            }
         };
     }
     static getAxisLength(chartOrientation, canvasModel) {
@@ -105,33 +112,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;
 }